强制图像分布在 Chrome 中的 CSS 列

Question

我有以下代码片段，它使用 CSS columns.

创建了一个漂亮的图像 "grid"

.gallery {
  columns: 4;
  column-gap: 5px;
}

.gallery-item {
  display: inline-block;
  vertical-align: top;
  position: relative;
}

.gallery-item > img {
  width: 100%;
}

<div class="gallery">
  <div class="gallery-item">
    <img src="https://via.placeholder.com/350">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/350x400">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/350x100">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/850x400">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/450x300">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/350x450">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/400x250">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/600x400">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/500x800">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/350x200">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/550">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/450x250">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/650x300">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/350">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/350">
  </div>
</div>

但是，当元素较少时，图像不会分布在所有列中，至少使用Chrome mac os.

版本 81.0.4044.138

.gallery {
  columns: 4;
  column-gap: 5px;
}

.gallery-item {
  display: inline-block;
  vertical-align: top;
  position: relative;
}

.gallery-item > img {
  width: 100%;
}

<div class="gallery">
  <div class="gallery-item">
    <img src="https://via.placeholder.com/350">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/350x400">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/350x100">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/850x400">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/450x300">
  </div>
</div>

同样的情况发生在更少的元素和相同的高度上。

.gallery {
  columns: 4;
  column-gap: 5px;
}

.gallery-item {
  display: inline-block;
  vertical-align: top;
  position: relative;
}

.gallery-item > img {
  width: 100%;
}

<div class="gallery">
  <div class="gallery-item">
    <img src="https://via.placeholder.com/350">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/350">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/350">
  </div>
</div>

有没有一种方法可以强制在所有 4 列中分配更少的元素 acros？如果我有 3 个元素，则为 3 列，等等

在 Safari 和 Firefox 上，它的行为符合我的要求。

这是 Chrome 中的样子：https://imgur.com/UE196vZ
这是在 Safari 中：https://imgur.com/fXUVn82

Answer 1

这里的问题是.gallery-item { display: inline-block; ...设置display: block;

img {
  width: 100%;
  vertical-align: middle;
}

.gallery-wrapper {
  padding: 1.5em;
  max-width: 960px;
  margin-right: auto;
  margin-left: auto;
}

.gallery {
  column-count: 1;
  column-gap: 10px;
}

.gallery-item {
  display: block;
  margin-bottom: 10px;
}

.gallery-item,
.gallery-content {
  border-radius: 4px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .gallery {
    column-count: 2;
  }
}

@media (min-width: 1024px) {
  .gallery {
    column-count: 3;
  }
}

<div class="gallery-wrapper">
  <div class="gallery">
    <div class="gallery-item">
      <img src="https://via.placeholder.com/350">
    </div>
    <div class="gallery-item">
      <img src="https://via.placeholder.com/350x400">
    </div>
    <div class="gallery-item">
      <img src="https://via.placeholder.com/350x100">
    </div>
    <div class="gallery-item">
      <img src="https://via.placeholder.com/850x400">
    </div>
    <div class="gallery-item">
      <img src="https://via.placeholder.com/450x300">
    </div>
  </div>
</div>

强制图像分布在 Chrome 中的 CSS 列

Force images distribution across CSS columns in Chrome

html

css

google-chrome

css-multicolumn-layout