CSS列：首先填充行

Question

我正在尝试使用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>

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

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

Answer 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>

Answer 2

您必须将它们显示为块而不是内联块，才能使它们彼此重叠显示。 像这样：

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