Столбцы CSS с левым правым потоком

Скажем, у меня есть div, который будет содержать набор элементов (divs), которые могут иметь разную высоту, но все они будут иметь одинаковую ширину.

В настоящее время я достиг этой изотопной + кладки, но, поскольку некоторые браузеры уже поддерживают несколько столбцов CSS3, я надеялся, что для этих браузеров будет доступно только CSS-решение, а для остальных - возврат к Javascript.

Это CSS, который я пытался:

.div-of-boxes {
  -webkit-column-count: 3;
  -webkit-column-gap:   10px;
  -moz-column-count:    3;
  -moz-column-gap:      10px;
  column-count:         3;
  column-gap:           10px;
}

Однако это делает поток элементов сверху вниз влево-вправо. Я бы хотел вместо этого левый правый поток сверху вниз. Это пример того, что мне хотелось бы:

1 2 3
4 5 6
7 8 9

Но это то, что я получаю:

1 4 7
2 5 8
3 6 9

В Поток многостолбцовых элементов слева направо перед сверху вниз что-то подобное задается, но я не удовлетворен ответом, и он не будет работать с элементами разной высоты. Возможно ли это вообще с столбцами CSS, или это ограничение?

Ответ 1

Спецификация с несколькими столбцами не содержит свойств для изменения распределения элементов среди столбцов: http://www.w3.org/TR/css3-multicol/. Такое свойство, похоже, противоречит тому, для чего был разработан модуль (воссоздание того, как публикуются газеты или журналы).

Ни один из других чистых CSS-решений не позволит вам добиться эффекта, который вы ищете.

Ответ 2

Если ваш макет всегда будет шириной в 3 столбца, вы можете попробовать использовать селектор "nth" на своих внутренних div. Вы можете сделать это, очистив свой 4-й элемент.

CSS

#container {
    overflow: hidden;
    width: 440px;
}
#container div {
    background-color: gray;
    width: 110px;
    margin: 5px;
    float: left;
}
#container div:nth-child(4) {
    clear: both;
}

HTML

<div id="container">
    <div id="widget1">1</div>
    <div id="widget2">2</div>
    <div id="widget3">3</div>
    <div id="widget4">4</div>
    <div id="widget5">5</div>
    <div id="widget6">6</div>
    <div id="widget7">7</div>
    <div id="widget7">8</div>
</div>

Что-то вроде: http://jsfiddle.net/R8GRp/

Ответ 3

Вы можете использовать jQuery для переупорядочения элементов в столбцах. В случае 2 cols это будет:

$('.your-columns-container .your-item:nth-child(even)').appendTo('.your-columns-container');

https://jsfiddle.net/hzvp7sgf/

И что-то более сложное для 3 столбцов:

$('.your-columns-container .your-item:nth-child(3n - 1)').addClass('container-col2');
$('.your-columns-container .your-item:nth-child(3n)').addClass('container-col3');

$('.container-col2').appendTo('.your-columns-container').removeClass('container-col2');
$('.container-col3').appendTo('.your-columns-container').removeClass('container-col3');

https://jsfiddle.net/d4LeLyu5/