Parent div doesn't include all children

问题

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.

Here is the 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;}

Here is the 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>

Here is the result:

回答1:

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; }

New 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>

New 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;}

See: http://jsfiddle.net/Wexcode/g7MkN/

回答2:

try to place the div.img above the div.clear_it

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

回答3:

You need to clear the float. Since your <div id="img"></div> is floated to the left, right after your clear_it div

Take a look at this for some help

回答4:

You question is not clearly written.

Do you want the tan background to extend up to the image?

Use this:

#content{ overflow:auto; }

回答5:

Your problem is that you have child elements that are floated, in a parent element that isn't floated. In this instance, the children, although contained by the parent, will not be "aligned" with it, as they aren't in the same "positioning" hierarchy.

I've set up a JSFiddle: http://jsfiddle.net/M2pMh/6/

Note the use of float. You can play with this (as in the answers above) to achieve the results you want.

By moving the image div into the area below content, and floating it left, whilst sizing the other elements to fill their parents (and to float), img will now be below the header and content.

来源：https://stackoverflow.com/questions/8424569/parent-div-doesnt-include-all-children

标签

css

html

parent