CSS列：先填充行答案

【问题标题】：CSS columns: fill row firstCSS列：先填充行
【发布时间】：2018-08-17 20:54:36
【问题描述】：

我正在尝试使用 css3 列进行 pinterest 样式的布局。

这是我目前的代码：

.column-container {
  width: 100%;
  column-count: 4;
  column-gap: 5px;
  padding: 0;
  margin: 0;
}

.column-container > * {
  width: 100%;
  display: inline-block;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
}

<div class="column-container">
   <figure>
      <img src="https://via.placeholder.com/500x150">
   </figure>
   <figure>
      <img src="https://via.placeholder.com/500x250">
   </figure>
   <figure>
      <img src="https://via.placeholder.com/500x350">
   </figure>
   <figure>
      <img src="https://via.placeholder.com/500x450">
   </figure>
   <figure>
      <img src="https://via.placeholder.com/500x150">
   </figure>
   <figure>
      <img src="https://via.placeholder.com/500x250">
   </figure>
   <figure>
      <img src="https://via.placeholder.com/500x350">
   </figure>
   <figure>
      <img src="https://via.placeholder.com/500x450">
   </figure>
   <figure>
      <img src="https://via.placeholder.com/500x150">
   </figure>
</div>

到目前为止它可以工作，但是当<figure> 元素很少时会出现问题：

.column-container {
  width: 100%;
  column-count: 4;
  column-gap: 5px;
  padding: 0;
  margin: 0;
}

.column-container > * {
  width: 100%;
  display: inline-block;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
}

<div class="column-container">
   <figure>
      <img src="https://via.placeholder.com/500x150">
   </figure>
   <figure>
      <img src="https://via.placeholder.com/500x250">
   </figure>
</div>

如您所见，如果您有两个元素，它们会在第一列中进行调整。即使有四个元素也会发生这种情况：两个在第一列，两个在第二列。

有没有办法让它们每列调整一个？

【问题讨论】：

使用浮动：左；在 .column-container > * { ... }

标签： html css css-multicolumn-layout

【解决方案1】：

您将数字显示为内联块。改为显示它们

.column-container > * {
  width: 100%;
  display: block;
  margin: 0;
  padding: 0;
}

.column-container {
  width: 100%;
  column-count: 4;
  column-gap: 5px;
  padding: 0;
  margin: 0;
}

.column-container > * {
  width: 100%;
  display: block;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
}

<div class="column-container">
   <figure>
      <img src="https://via.placeholder.com/500x150">
   </figure>
   <figure>
      <img src="https://via.placeholder.com/500x250">
   </figure>
</div>

【讨论】：

【解决方案2】：

您必须将它们显示为块而不是 inline-block 才能让它们显示在彼此之上。像这样：

.column-container > * {
   width: 100%;
   display: block;
   margin: 0;
   padding: 0;
}

【讨论】：