Intereting Posts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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