Изменение направления движения столбцов CSS

Итак, у меня есть 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

Это - это то, что я делаю после

enter image description here

Ответы

Ответ 1

Один из подходов заключается в использовании flexbox

#blogPosts {
   display: flex;
   align-items: left;
   justify-content: left;
   flex-direction: row;
   flex-wrap: wrap;
   flex-flow: row wrap;
   align-content: flex-end;
}

http://jsfiddle.net/o59gc4hw/2/

Ответ 2

Ну, с первого взгляда я подумал, что вы должны посмотреть на библиотеку Masonry. Когда вы будете искать кладки, вы также можете найти гибкую коробку кладки и столбцы кладки.

Проблема как с столбцами, так и с гибкими полевыми решениями заключается в том, что первые элементы находятся в первом столбце.

Я нашел одно возможное решение, которое работает только при фиксированном количестве элементов.

Для девяти элементов в трех столбцах:

#blogPosts {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
.blog {
  color: white;
  width: 33%;
}
.blog:nth-child(3n+1) {
  -webkit-box-ordinal-group: 1;
  -webkit-order: 0;
      -ms-flex-order: 0;
          order: 0;
}
.blog:nth-child(3n+2) {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
}
.blog:nth-child(3n+3) {
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
}
.blog:nth-child(n+7):nth-child(-n+9) {
  page-break-after: always;
  -webkit-break-after: always;
     -moz-break-after: always;
          break-after: always;
}
<div id="blogPosts">
    <div class="blog" style="background-color:blue; height:50px;">1</div>
    <div class="blog" style="background-color:red; height:75px;">2</div>
    <div class="blog" style="background-color:green; height:100px;">3</div>
    <div class="blog" style="background-color:black; height:30px;">4</div>
    <div class="blog" style="background-color:yellow; height:50px;">5</div>
    <div class="blog" style="background-color:purple; height:80px;">6</div>
    <div class="blog" style="background-color:pink; height:150px;">7</div>
    <div class="blog" style="background-color:orange; height:15px;">8</div>
    <div class="blog" style="background-color:gold; height:50px;">9</div>
</div>

Ответ 3

Я полагаю, что ваше недоразумение о том, как разделение столбцов работает с css colunms. Класс blogPosts разделяет контент как можно более равномерно на 3 столбца, поэтому он выглядит следующим образом:

1 3 5
2 4 6


но если вы делаете

<div class="blogPosts">
    Content 1
</div>
<br>
<div class="blogPosts">
    Content 2
</div>
<br>
<div class="blogPosts">
     Content 3
</div>

Тогда конические появятся как:

1
2
3

но содержимое в этих разделах будет соответствовать трем столбцам.

Ответ 4

Это может быть реализовано с помощью простого css. HTML:

<div id="blogPosts">
<div class="blog">1Content</div>
<div class="blog">1Content</div>
<div class="blog">2Content</div>
</div>

CSS: создайте класс "blog" как встроенный блок и поплавок влево, как показано ниже.

.blog {
     display: inline-block;
     width: 33.3%;
     float: left;
     margin-bottom: -999em;
     padding-bottom: 999em; 
}

#blogPosts{
    overflow: hidden;
}

Это исправляет проблему с высотой, которая у вас была.:)