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

Question

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

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

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

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

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

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

Answer 1

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

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

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

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

Answer 2

В настоящее время описанная проблема может быть решена более гибко с помощью макета Flexbox.Требуется последний и лучший браузер (IE 11+).

http://www.sketchingwithcss.com/samplechapter/cheatsheet.html#column

http://philipwalton.github.io/solved-by-flexbox/

Answer 3

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

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