更改CSS列的方向流

Question

所以我有这样的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的顶部将从{1}}开始，而不是y } + height of 2。

HTML是这样的：

y

我该怎么做才能解决这个问题？

我很高兴任何解决方案，甚至是包含javascript / jquery的解决方案

This是我追求的事情

Answer 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/

Answer 2

乍一看，我认为你应该看看Masonry库。当您搜索砌体时，您可能还会找到masonry flexible box和masonry columns。

列和灵活方框解决方案的问题在于第一个项目位于第一列。

我找到了一个可能的解决方案，只有当您的项目数量固定时才会有效。

三列中的九个项目：

#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>

以上使用灵活的框，包含order属性和nth子选择器。最后还要看：How to specify an element after which to wrap in css flexbox?

Answer 3

我相信你误解了列分离如何与css colunms一起工作。您的blogPosts类将内容尽可能均匀地分隔在3个colunms中，因此它看起来像：

  

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

但这些部分中的内容适合3个colunms。

Answer 4

这可以用简单的css实现。 HTML：

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

CSS：制作＆＃34;博客＆＃34;如下所示，将类作为内联块并向左浮动。

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

#blogPosts{
    overflow: hidden;
}

这将解决你所拥有的身高问题。 ：）