Как сделать родительский div расти вместе со своими детьми?

Ответ 1

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

<br style="clear: both">

Итак, скажем, что оба дочерних элемента в вашем примере имеют float, код будет выглядеть следующим образом:

<div id="container">
     <div id="child" style="height:100px;">
           ** CONTENT GOES HERE **
           <br style="clear: both">
     </div>
     <div id="child2" style="height:100px;">
           ** CONTENT GOES HERE **
           <br style="clear: both">
     </div>
</div>

Вы можете использовать любой node, если вы используете на нем "clear: both" (So <div style="clear: both"></div> тоже будет работать).

Ответ 2

Если содержимое внутри вашего <div> будет размещено, оно не будет расширяться. Вы можете легко исправить это, поместив стиль overflow:hidden CSS в родительский <div>. Обратите внимание, что это не сработает, если все дети полностью позиционируются. Когда вы абсолютно позиционируете элемент, вы извлекаете его из потока документов. Что касается позиционирования, этот элемент больше не является "дочерним", хотя семантически он все еще есть.

<div style="overflow:hidden">
  <div style="float:left">
    <!--Content-->
  </div>
  <div style="float:left">
    <!--Content-->
  </div>
</div>

Ответ 3

Использование display: table в родительском div увеличивает его, даже если его содержимое является плавающим элементом. Это приводит к тому, что div ведет себя как таблица, в основном.

Взгляните на свойства экрана: http://www.w3.org/wiki/CSS/Properties/display

Ответ 4

Обычно я создаю класс fix:

.clearfix{clear:both;}

Затем вы всегда можете использовать это, когда вам нужно.

<div class='wrapperContainer'>
    <div class="classFloated">
         Content
    </div>
    <div class="clearfix"></div>
    <div class="classFloated">
         Content
    </div>
    <div class="clearfix"></div>
</div>