CSS не растягивающая коробка

Question

У меня вопрос о моем макете. У меня есть установки что-то вроде этого:

<div id="container"> 
    <div id="body"> 
     <div id="item"> 
     </div> 
     <div id="item"> 
     </div> 
    </div> 
</div> 

И я хочу, чтобы тело коробки, чтобы растянуть с количеством пунктов я ставлю в нем, но это не так. кто-нибудь знает, как исправить это с помощью css.

Answer 1

Если ваши объекты перемещены, вы можете добавить блок с набором параметров clear: both;, как уже упоминал Пат.

Если вы не хотите, еще один элемент в вашем коде, вы могли бы применить overflow: hidden; к вашему телу:

<div id="container"> 
    <div id="body" style="overflow: hidden;"> 
     <div class="item"></div> 
     <div class="item"></div> 
    </div> 
</div> 

Будьте осторожны, хотя, как и все, что торчит снаружи коробки тела будут сокращены.

Answer 2

Прежде всего, вы должны использовать класс для вашего элемента div, поскольку идентификаторы должны быть уникальными на странице. Во-вторых, это, вероятно, вызвано тем, что ваш элемент div плавает. Если добавить очищающий элемент под ними, он должен это исправить:

<div id="container"> 
    <div id="body"> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div style="clear: both"></div> 
    </div> 
</div> 

Answer 3

ли ваша деталь DIVS поплавка влево (display: inline может работать тоже, не пробовал), и установить дисплей вашего тела дел до display:inline-block; , Это должно сокращаться, чтобы соответствовать его содержимому.

Быстрый и грязный:

<div id="container"> 
    <div id="body" style="display:inline-block; overflow: auto;"> 
     <div class="item" style="float: left;"> 
      Hi 
     </div> 
     <div class="item" style="float: left"> 
      There 
     </div> 
    </div> 
</div> 

Edit: Исправлено, благодаря Matt Сах.

Answer 4

Я лично отказался бы от использования встроенного блока, поддержка Internet Explorer, поскольку он плохо работает в более старых версиях.

У IE 6-8 (только режим совместимости) есть проблемы с ним.