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>

结果如下：

results

Answer 1

我建议使用另一种方法来清除不涉及任何清除div的浮动（因此完全删除clear_it）。只需将overflow: auto或overflow: hidden添加到包含浮动元素的容器中：

#content { overflow: auto; }
#container { overflow: auto; }
#content-header { overflow: auto; }

新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/

Answer 2

尝试将div.img放在div.clear_it

之上

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

Answer 3

您需要清除浮动。由于您的<div id="img"></div>在clear_it div

之后浮动到左侧

请look at this寻求帮助

Answer 4

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

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

注意使用float。你可以玩这个（如上面的答案）来达到你想要的效果。

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

Answer 5

你的问题写得不清楚。

你想让棕褐色背景延伸到图像吗？

使用此：

#content{ overflow:auto; }

父div不包括所有孩子

5 个答案: