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

Question

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

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

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

Answer 1

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

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

Answer 2

Пусть ваши элементы div плавают влево (display: inline тоже может работать, не пробовали) и установите отображение вашего тела div на 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>

Редактировать: Исправлено, благодаря Мэтту Саку.

Answer 3

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

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

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

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

Answer 4

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

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