Question

基本上，这是我的问题。这个容器没有正确地继承renderzone的高度。它只是保持不变，它真的很恶心。 Renderzone将随用户内容动态增长，我希望有一个list-list-thing的列，所以它不会最终包装内容。

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>

Answer 1

尝试将您的样式设置为overflow:auto。因为你是浮动它，它超出了范围。放置溢出会将其返回到范围内。

Answer 2

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

最糟糕的方法：通过插入div清除最后一个子元素之后的浮动符（您也可以使用span而不是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>

CSS继承不继承

2 个答案: