Есть фрагмент html
, например:
<div id="x">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
Что-бы заполнить их слева-направо/сверху вниз, достаточно задать контейнеру фиксированую ширину, а внутреним блокам добавить свойство float:left
. Результат будет таким:
1 2 3
4 5 6
7 8 9
Задача состоит в том, что-бы блоки располагались сначала сверху-вниз, а потом — слева-направо. Тоесть результат должен быть таким:
1 4 7
2 5 8
3 6 9
Как вариант, можно использовать свойство columns
из css3
, но существует ли более кроссбраузерное решение?