47

所以我有这样的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

重要的！

我需要的另一个重要属性是，每个帖子之间必须垂直设置边距。因此，例如，如果您查看上面的表格 if 2is long than 1，则顶部4将从y1 开始，而不是：height of 2+ y。

HTML是这样的：

<div id="blogPosts">
    <div class="blog">Content</div>
    <div class="blog">Content</div>
    ...
</div>

我能做些什么来解决这个问题？

我对任何解决方案都很满意，即使是包含 javascript/jquery 的解决方案

这就是我所追求的

在此处输入图像描述

4

4 回答 4

11

最接近的事情是使用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/

于 2015-05-15T16:58:56.017 回答
3

乍一看，我认为你应该看看Masonry图书馆。然后，当您搜索 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子选择器。最后还看到：如何指定一个元素，然后将其包装在 css flexbox 中？

于 2015-05-17T22:14:51.587 回答
0

我相信您误解了列分离如何与 css 列一起使用。您的 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

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

于 2015-05-15T17:03:22.163 回答
-2

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

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

CSS：将“博客”类设为内联块并向左浮动，如下所示。

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

#blogPosts{
    overflow: hidden;
}

这也将解决您遇到的高度问题。:)

于 2015-05-18T15:52:19.167 回答