使用三列更改CSS列平衡

Question

我有一个布局，可以是1列、2列或3列，具体取决于@media。

请参阅https://jsfiddle.net/rcfpcdhq/

对于三列，当为(number of content divs) % 3 = 1时，最后一列总是比前两列短两个div，尽管我更希望第一列是底部有额外div的唯一一列(在本例中，跨列的div count将是3-2-2而不是3-3-1)。

这是不是会受到CSS的影响？我可以使用Bootstrap而不是column-count，尽管我想不出一种使用BS push/pulls来维护列的垂直排序的方法。

有什么想法吗？我是不是漏掉了什么明显的东西？

我唯一的想法是在" div -5“之后插入一个间隔符div，它隐藏在单列和2列布局中，以便将"div-6”强制到第三列……

编辑:为了清楚，根据列数的不同，七个div的顺序应该是：

1-Column      2-Columns          3-Columns
--------      -------------      --------------------
[div1]        [div1] [div5]      [div1] [div4] [div6]
[div2]        [div2] [div6]      [div2] [div5] [div7]
...           [div3] [div7]      [div3]
[div7]        [div4]

Answer 1

您不能对列执行此操作，因为column-count先填充第一列，然后填充第二列，依此类推，而且您希望按行而不是按列填充。

您可以很容易地做到这一点，没有列，通过使DIV的浮动向左。

使用Float to left，这样DIV将从左到右，然后从上到下对自己进行排序。

宽度是32% (乘以三列，将得到96%)，右边距是2% (乘以前两列，将得到最后的100%)。你可以随心所欲地调整。

.content:nth-of-type(3n+0)之所以在那里，是因为如果不这样的话，第三列上的DIV会有一个右边距，使其为102% (或者如果您将其调整为100%，则会创建一个无用的空间)。

​

* {
  margin: 0;
  padding: 0;
}
.content {
  float: left;
  box-sizing: border-box;
  border: 1px solid black;
  height: 100px;
  width: 32%;
  margin-right: 2%;
}
.content:nth-of-type(3n+0) {
  margin-right: 0;
}

<div class="content">
  div-1
</div>

<div class="content">
  div-2
</div>

<div class="content">
  div-3
</div>

<div class="content">
  div-4
</div>

<div class="content">
  div-5
</div>

<div class="content">
  div-6
</div>

<div class="content">
  div-7
</div>

​

你的小提琴：https://jsfiddle.net/rcfpcdhq/1/

Answer 2

仅为所需的视口添加额外的clearfix，如.visible-xs-block、.visible-sm-block、.visible-md-block和.visible-lg-block。

<div class="row">
  <div class="col-xs-4 col-md-6 col-lg-12">1</div>
  <div class="col-xs-4 col-md-6 col-lg-12">2</div>

  <div class="clearfix visible-md-block"></div> <!-- It works on medium size -->

  <div class="col-xs-4 col-md-6 col-lg-12">3</div>

  <div class="clearfix visible-xs-block"></div> <!-- It works on small size -->

  <div class="col-xs-4 col-md-6 col-lg-12">4</div>

  <div class="clearfix visible-md-block"></div> <!-- It works on medium size -->

  <div class="col-xs-4 col-md-6 col-lg-12">5</div>
  <div class="col-xs-4 col-md-6 col-lg-12">6</div>

  <div class="clearfix visible-xs-block"></div> <!-- It works on small size -->

  <div class="clearfix visible-md-block"></div> <!-- It works on medium size -->

  <div class="col-xs-4 col-md-6 col-lg-12">7</div>
</div>

现在，您将拥有：

1

2

3.

4.

5

6

7

对于大尺寸，

1

3.

5

7

对于中等大小和

1 3

4 6

7

适用于小尺寸。