父div不包括所有子项 [英] Parent div doesn't include all children

问题描述

我有一个内容div，有一个标题div，其中包含两个其他div，然后一个最终的div不在标题，但是在内容。

I have a content div, that has a header div, which contains two other divs, and then a final div that is not in the header, but is in the content. However, it looks like the last child div of content is not actually contained in the content.

这里是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>

以下是结果：

img src =https://i.stack.imgur.com/YVx4b.pngalt =results>

推荐答案

我建议一个不同的方法来清除你的浮动，不涉及任何清除div（因此删除 clear_it ）。只需在包含浮动元素的容器中添加 overflow：auto 或 overflow：hidden ：

I'd recommend a different method to clear your floats that doesn't involve any clearing divs (thus removing clear_it altogether). Just add overflow: auto or overflow: hidden to your containers that contain the floated elements:

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

这篇关于父div不包括所有子项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！