文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS继承不继承

问CSS继承不继承
EN

Stack Overflow用户

提问于 2011-10-22 01:26:59

回答 2查看 1.6K关注 0票数 1

基本上，这是我的问题。该容器未正确继承renderzone的高度。它只是保持不变，这真的很令人恼火。Renderzone将随着用户内容动态增长，我希望有一个章节列表的列，这样它就不会包装内容。

JSFiddle版本- http://jsfiddle.net/K2NPz/1/

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div id="hidden"
             style="visibility: visible; height: auto; ">
            <div style="height: auto;">
                <div id="renderzone" 
                     style="background-color: #bbe4e0; padding: 5px;">
                    <div style=" min-height: 175px;height: inherit;float: left;overflow: auto;height: 100%;">
                        <div id="chapterlist" 
                             style="float: left; width: auto; height: auto; display: inline-block; border: 1px; border-style: solid; border-radius: 10px 0px 10px 0px; min-height: 140px; min-width: 150px; margin-right: 10px; margin-top: 10px; margin-left: 10px; padding: 10px; background-color: #B9D9F1;">
                            <a href="#render1" 
                               style="display: inline-block; padding-top: 8px; padding-bottom: 8px; color: #346460; font-size: 130%;" 
                               id="anchor1">Header 1</a><br>
                        </div>
                        <img src="blank.jpg" alt="White Pixel">
                    </div>
                    <div style="background-color: white; border-radius: 10px; margin: 10px; padding: 5px; margin-right: 20px; box-shadow: 10px 10px 5px #888;">
                        <h1 id="render1" 
                            name="render1" 
                            class="renderh1">Header 1<br></h1>
                        <p id="render2" 
                           name="render2"
                           class="renderp">Long text here...<br>
                        </p>
                        <img id="render3" 
                             name="render3" 
                             class="renderimg" 
                             alt="Blank Pixel" 
                             src="" 
                             style="max-width: 400px;"><br>
                        <a href="#top">To Top</a>
                    </div>
                </div>
            </div>
            <input type="button" value="??" id="sender">
            <input type="button" value="??" id="modoru">
        </div>
    </body>
</html>

html

css

inheritance

回答 2

Stack Overflow用户

发布于 2011-10-22 01:30:46

尝试将样式设置为overflow:auto。因为你让它浮动，所以它超出了作用域。将它与overflow放在一起将在作用域中返回它。

票数 1

Stack Overflow用户

发布于 2014-11-20 20:58:42

浮动元素在继承高度方面有问题，因为它们不知道中心内容的高度。

最糟糕的方法是:通过插入div来清除最后一个子元素后面的浮动框(也可以使用代替div <span class="clear"></span> )。

.main {
    background-color: blue;
    width: 200px;
}
.floated {
    width: 250px;
    height: 150px;
    float: left;
}
.clear {
    clear: both;
}

<div class="main">
    <div class="floated"></div>
    <div class="floated"></div>
    <div class="floated"></div>
    <div class="clear"></div>
</div>

更好的方法:父div的- overflow: hidden。

如果你使用了浮动的子元素，你需要清除他的父div。它将使页边距正常工作，并且不会生成混乱的html元素。

.main {
    background-color: blue;
    width: 200px;
    overflow: hidden 
}
.floated {
    width: 250px;
    height: 150px;
    float: left;
}

<div class="main">
    <div class="floated"></div>
    <div class="floated"></div>
    <div class="floated"></div>
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/7853020

复制

相似问题

问CSS继承不继承
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS继承不继承EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS继承不继承
EN