Скажем, у меня есть 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, или это ограничение?
Спецификация с несколькими столбцами не содержит свойств для изменения распределения элементов среди столбцов: http://www.w3.org/TR/css3-multicol/. Такое свойство, похоже, противоречит тому, для чего был разработан модуль (воссоздание того, как публикуются газеты или журналы).
Ни один из других чистых CSS-решений не позволит вам добиться эффекта, который вы ищете.
Если ваш макет всегда будет шириной в 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/
Вы можете использовать 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');