Родительский 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: 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

Ваш вопрос не четко написан.

Хотите, чтобы фон загара распространялся до изображения?

Используйте это:

#content{ overflow:auto; }

Answer 4

Ваша проблема в том, что у вас есть дочерние элементы с плавающей точкой, в родительском элементе с плавающей точкой.В этом случае дочерние элементы, хотя и содержатся родителем, не будут «выровнены» с ним, поскольку они не находятся в одной иерархии «позиционирования».

Я настроил JSFiddle: http://jsfiddle.net/M2pMh/6/

Обратите внимание на использование поплавка.Вы можете поиграть с этим (как в ответах выше), чтобы достичь желаемых результатов.

Перемещая изображение div в область под содержимым и перемещая его влево, изменяя размеры других элементов, чтобы заполнить их родителей(и плавать), img теперь будет ниже заголовка и содержимого.

Answer 5

Вам нужно очистить поплавок.Так как ваш <div id="img"></div> всплывает влево, сразу после вашего clear_it div

посмотрите на для некоторой помощи