HTML и CSS: Вертикальный макет потока (стиль столбцов), как реализовать?

Стандартное позиционирование CSS/html "текущих" элементов горизонтально (на основе строк) = > float:left;. Что мне нужно сделать, чтобы разместить их, как в примере ниже (стиль столбцов). Есть ли какие-либо теги CSS, чтобы установить это где-нибудь? (В идеале, я не хочу настраивать сетку, это должно происходить так же автоматически, как и в стиле float: left style...)

+---------------------------+
|  DivBox1                  |
|  DivBox2                  |
|  DivBox3                  |
+---------------------------+

После добавления: еще 2 блока:

+----------------------------+
|  DivBox1  DivBox4          |
|  DivBox2  DivBox5          |
|  DivBox3                   |
+----------------------------+

Наконец, добавив еще 2 блока, он будет выглядеть так:

+-----------------------------+
|  DivBox1  DivBox4  DivBox7  |
|  DivBox2  DivBox5           |
|  DivBox3  DivBox6           |
+-----------------------------+

ОТВЕТЫ

Ответ 1

Существует CSS3 Columns (для эффекта, о котором вы говорите, Раздел "Балансировка высот - это хорошая вещь для чтения), которая поддерживается в новых браузерах и будет выглядеть примерно как

#box {
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
}

И будет поддерживать IE 10, FF и Chrome.

Или вы можете использовать инструмент, например Masonry.js, чтобы получить столбцы, подобные эффектам на странице (хотя для этого требуется, чтобы JS работал) и поддержка большего количества браузеров.

Ответ 2

Добавьте класс в каждый из div и создайте его с чем-то вроде:

.myDiv
{
  width: 33%;
  float: left;
}