Question

我的布局可以是1-，2-或3列，具体取决于@media。

有三列，当(number of content divs) % 3 = 1时，最后一列总是比前两列短两个div，但我更喜欢第一列是唯一一个在底部有一个额外div的列（在例如，列间的div计数为3-2-2而不是3-3-1。

这可能会受到CSS的影响吗？我可以使用Bootstrap而不是column-count，虽然我无法想到使用BS推/拉来保持垂直排序的方法。

有什么想法吗？我错过了一些明显的东西吗？

我只有想法是在＆＃34; div-5＆＃34;之后插入一个spacer div。隐藏在1和2列布局中，以强制＆＃34; div-6＆＃34;到第三栏......

编辑：要清楚，七个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向左浮动，您可以轻松地在没有列的情况下轻松完成。

使用向左浮动，以便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] [2]

[3] [4]

[5] [6]

[7]

中等大小和

[1] [2] [3]

[4] [5] [6]

[7]

小尺寸。

使用三列

2 个答案: