父级 div 不包含所有子级

Question

我有一个内容 div，它有一个标题 div，其中包含另外两个 div，然后是一个不在标题中但在内容中的最终 div。但是，看起来内容的最后一个子 div 实际上并未包含在内容中。

这是 CSS：

div.outline {border: 1px solid red;}
#content{background-color:tan;}
#container{width:680px;overflow:hidden;}
#header{margin-bottom:10px; background-color:yellow;}
#title{float:left;}
#link{float:right;}
.clear_it{clear:both;}
#chooser{float:left; margin-right:20px}
#renamer{padding-left:20px;}
#img{width:170px;height:130px;border:1px solid rgb(192,192,192);float:left;margin-left:20px;margin-top:20px;}

这是 HTML：

<div id="container">
    <div id="header">
        <div id="title">Header Title</div>
        <div id="link" style="float:right;">
            <a href="http://www.apple.com" target="_blank">Link</a>
        </div>
        <div class="clear_it"></div>
    </div>

    <div id="content">
        <div id="content_header">
            <div id="chooser">
                <select>
                    <option value="1">This is a fairly long option</option>
                    <option value="2">short</option>
                </select>
            </div>
            <div id="renamer">
                <a href="http://apple.com" target="_blank">Link</a>
            </div>
        </div>
        <div class="clear_it"></div>
        <div id="img"></div>
    </div>
</div>

这是结果：

Answer 1

我建议使用一种不同的方法来清除浮动，该方法不涉及任何清除 div（从而完全删除 clear_it）。只需将 overflow: auto 或 overflow: hide 添加到包含浮动元素的容器即可：

#content { Overflow: auto; }
#container { 溢出：自动； }
#content-header { 溢出：自动； }

新 HTML：

<div id="container">
    <div id="header">
        <div id="title">Header Title</div>
        <div id="link" style="float:right;">
            <a href="http://www.apple.com" target="_blank">Link</a>
        </div>
    </div>

    <div id="content">
        <div id="content_header">
            <div id="chooser">
                <select>
                    <option value="1">This is a fairly long option</option>
                    <option value="2">short</option>
                </select>
            </div>
            <div id="renamer">
                <a href="http://apple.com" target="_blank">Link</a>
            </div>
        </div>
        <div id="img"></div>
    </div>
</div>

新 CSS：

div.outline {border: 1px solid red;}
#content{background-color:tan; overflow: auto;}
#container{width:680px;overflow:auto;}
#header{margin-bottom:10px; background-color:yellow; overflow: auto;}
#title{float:left;}
#link{float:right;}
#content_header { overflow: auto; }
#chooser{float:left; margin-right:20px}
#renamer{padding-left:20px;}
#img{width:170px;height:130px;border:1px solid rgb(192,192,192);float:left;margin-left:20px;margin-top:20px;}

请参阅：http://jsfiddle.net/Wexcode/g7MkN/< /a>

Answer 2

尝试将 div.img 放在 div.clear_it 上方

<div id="img"></div>
<div class="clear_it"></div>

Answer 3

您需要清除浮动。由于您的

向左浮动，就在您的 clear_it div 之后，

采取 看看这个寻求帮助

Answer 4

你的问题没写清楚。

您希望棕褐色背景延伸至图像吗？

使用这个：

#content{溢出：自动; }

Answer 5

您的问题是您的子元素是浮动的，而父元素不是浮动的。在这种情况下，子级虽然包含在父级中，但不会与其“对齐”，因为它们不在同一“定位”层次结构中。

我已经设置了一个 JSFiddle： http://jsfiddle.net/M2pMh/6/

请注意使用浮动。您可以使用它（如上面的答案）来实现您想要的结果。

通过将图像 div 移动到内容下方的区域，并将其向左浮动，同时调整其他元素的大小以填充其父元素（并浮动），img 现在将位于标题和内容下方。