Сетка 2 х 2 с использованием поплавка с минимальной высотой

Question

У меня есть 4 деления на float:left; каждый с width: 400px; в div с width:800px;. В настоящее время создается сетка 2 x 2 с хорошо выровненными элементами div. Я установил свойство min-height: 150px;, потому что мне нужно разрешить расширению div при добавлении или удалении нового содержимого.

Если добавляется новый контент, то div расширяется, что портит хорошо выровненный 2 x 2 сеточный div, который у меня есть в настоящее время, потому что высота неровная, есть ли что-нибудь вокруг этого?

<div class="boxContainer">
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
</div>

.boxContainer{
    width: 800px;
    height: auto;
}

.box{
    float: left;
    min-height: 150px;
    width: 400px;
}

Answer 1

просто используйте отображение в качестве блока, потому что вы перемещаетесь влево, таким образом вам нужно будет назначить ширину, чтобы они не сдвинулись с места, как только текст будет добавлен, высота будет расти автоматически, мин.высота, не работает в старых браузерах и будет рассматриваться как высота, что ужасно :) http://www.webtoolkit.info/css-clearfix.html у вас есть прекрасное решение css для вашей проблемы с плавающей точкой слева, оно используется в контейнерах для сохранения div естественным -

да, проверьте, есть ли у вас

или другие элементы, которые имеют предопределенные отступы и поля, :) они могут быть немного неприятны в заднице:)

Я рекомендую использовать clearfix, потому что он хорошо работает, проверьте элемент в инструментах веб-разработчика, таких как firebug, и google web dev tools :)

, так что у вас есть полный контроль, вот код :)

<div class="boxContainer clearfix">
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
</div>

.boxContainer{
    width: 800px;
    height: auto;
}

.box{
    float: left;
    min-height: 150px;
    width: 400px;
    display: block;
}
/* I would put this at the top of the page, and minimise the newlines :) if you want to remove the "." (dot) then use this  content: "\00A0"; which puts a whitespace,  */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

Answer 2

, что на самом деле не работает для меня: http://jsfiddle.net/MMDqX/; D

, если совместимость браузера (по крайней мере, 6 или более старое, если я правильно помню) не является проблемой, возможно, использование табличного макетаработа, т.е. деления с отображением: таблица

например http://jsfiddle.net/MMDqX/1/