Почему у моего div нет высоты?

Я пытаюсь имитировать механизм строки-столбца, который использует фреймворк css bootstrap twitter.

У меня есть div, содержащий некоторые другие divs, которые сами содержат контент come. В моем инспекторе элементов он показывает, что контейнер не имеет высоты. Разве высота div не должна быть высотой элементов, которые она содержит?

<div class="container">
    <div class="row yellow">
        <div class="column-1 red">
            column-1
        </div>

        <div class="column-1 blue">
            column-1
        </div>

        <div class="column-1 green">
            column-1
        </div>

        <div class="column-1 orange">
            column-1
        </div>

        <div class="column-1 red">
            column-1
        </div>

        <div class="column-1 blue">
            column-1
        </div>

        <div class="column-1 green">
            column-1
        </div>

        <div class="column-1 orange">
            column-1
        </div>

        <div class="column-1 red">
            column-1
        </div>
    </div>
</div>

вот jsfiddle:

HTML / CSS в вопросе

8
css html layout twitter-bootstrap

2 ответов

причина, по которой высота или контейнеры равны 0, заключается в том, что вы плаваете все содержимое внутри них и плавающие элементы не расширяют высоту (или ширину) своих родителей.

как вы плаваете все elents в row Он имеет высоту 0 и поэтому имеет .container.

чтобы предотвратить это, вы можете :

  1. set overflow:hidden; на контейнерах демо
  2. снимите поплавок с элемент блока в конце контейнера с clear:both; демо

вы также можете проверить этот вопрос Для справки : как вы держите родителей плавающих элементов от коллапса?

23

потому что вы не назначили высоту контейнеру. Вот почему, когда вы проверяете элемент, высоты нет.

0