如何在网格系统中填充图块之间的垂直空间（使用 CSS）答案

【问题标题】：How to fill vertical spaces between tiles in a grid system (Using CSS)如何在网格系统中填充图块之间的垂直空间（使用 CSS）
【发布时间】：2014-06-16 11:31:36
【问题描述】：

我正在尝试在网格系统中排列卡片。以下是卡片的属性

固定宽度（例如 150 像素）
可变高度（取决于内容）

我可以编写一个简单的 JS 代码来将卡片排列在一个网格中而不留任何空间，但我只是想知道 CSS 是否可以为我做到这一点。

这里是JSBin Demo。

我正在尝试使用基于 CSS 的解决方案，因为这样可以避免在调整窗口大小时运行 JS 代码来重新排列卡片所以我认为基于 CSS 的解决方案会更有效。但我无法填补空白。

TLDR：如何使用 CSS 移除这些空白并向上移动卡片？

【问题讨论】：

标签： html css gridview

【解决方案1】：

如果您可以接受卡片的垂直顺序，那么 CSS3 column 可能对您有用。

演示：http://jsfiddle.net/abhitalks/8M3rU/

CSS：

在容器上提供column-count。（包括供应商前缀，如 -webkit- 后跟标准）
从子元素中删除float，并使其成为inline-block

.container {
    ...
    -webkit-column-count: 2;
    column-count: 2; /* the standard property after all prefixed ones */
}

.a, .b {
    display: inline-block;
    ..
}

编辑：

将子元素设为inline-block 可防止它们分成列。这就是 columns 在 CSS3 中的工作方式。

参考：http://www.w3.org/TR/css3-multicol/

但是，避免子块元素意外分栏的正确方法是使用column-break-inside。

演示 2：http://jsfiddle.net/abhitalks/8M3rU/1/

相关 CSS：

.a, .b {
    ..
    -webkit-column-break-inside: avoid;
    column-break-inside: avoid;
}

【讨论】：

哇..这有效..正如我在回答中已经提到的那样，我尝试了css3 column-count，但我猜浮动和显示属性导致了问题。你能解释一下原因吗，我会接受的
这是因为列的工作方式。它们破坏块元素。但是，正确的方法是使用column-break-inside: avoid;。
谢谢..我现在明白了
@abhitalks 为什么要删除 column-count 只留下前缀属性？我猜这是错误的（相反，它必须放在前缀属性之后，而不是之前）......
@AndreaLigios：那是无意的。我很快创建了小提琴，我倾向于只保留 -webkit 前缀以减少混乱（因为我使用 Chorme）。感谢您指出了这一点。修复它..

【解决方案2】：

一种可能性是简单地使用两个容器，并分别填充它们？ Demo

使用两个单独的列表：

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="a">A</div>
  <div class="a">A</div>
</div>
<div class="container">
  <div class="a">A</div>
  <div class="a">A</div>
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="a">A</div>
</div>

并给他们这个样式：

.container {
  background: #ddd;
  width: 155px;
  border: 2px solid #ccc;
  border-radius: 2px;
  float: left;
}

您可以对其进行更改以使其看起来像是一个容器。

【讨论】：

+1 这确实是一个不错的解决方案，但我们必须编写 JS 代码来将不同的卡片发送到不同的容器中。

【解决方案3】：

我尝试了CSS3 column-count 属性，结果看起来更好。

查看此JSBin Demo 2。但是问题是最后一张卡片被剪掉了。

请看下图……

我仍然很想知道更好的解决方案。

【讨论】：

【解决方案4】：

您需要将以下内容添加到每个块中

.a, .b {
  -moz-column-break-inside: avoid; /* Mozilla */
  -webkit-column-break-inside: avoid;  /* Safari and Chrome */
  break-inside: avoid-column;
}

这基本上告诉它不要分解项目以使列相等

【讨论】：