Итак, у меня есть CSS:
#blogPosts{
-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px;
width: 100%;
}
и это создает 3 столбца отлично, но когда я получаю другую строку, порядок, кажется, выходит вертикально, как:
1,3,5
2,4,6
Вместо того, чего я хочу:
1,2,3
4,5,6
Внимание!
Другим важным атрибутом, который мне нужен, является то, что должен быть заданный запас между каждым столбцом по вертикали. Так, например, если вы посмотрите на таблицу выше, если 2
длиннее 1
, верхняя часть 4
запустит y
ниже 1, а не: height of 2
+ y
.
HTML выглядит так:
<div id="blogPosts">
<div class="blog">Content</div>
<div class="blog">Content</div>
...
</div>
Что я могу сделать, чтобы исправить это?
Я рад за любые решения, даже такие, которые включают javascript/jquery
Это - это то, что я делаю после