在 Chrome 中强制跨 CSS 列分布图像答案

【问题标题】：Force images distribution across CSS columns in Chrome在 Chrome 中强制跨 CSS 列分布图像
【发布时间】：2020-06-11 06:09:57
【问题描述】：

我有以下 sn-p 使用 CSS columns 创建一个漂亮的图像“网格”。

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

但是，当元素较少时，图像不会分布在所有列中，至少在 mac os 上使用 Chrome 版本 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 列中分配更少的元素？如果我有 3 个元素，则为 3 列，等等。

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

这是它在 Chrome 中的外观：https://imgur.com/UE196vZ
这是在 Safari 中：https://imgur.com/fXUVn82

【问题讨论】：

看看column-count 对于不同的浏览器，column-count 有很多错误。你想要得到的是 masonry gallery 不幸的是，js 被用来为所有浏览器获得相同的外观。
不，这不是砌体。它只是在 4 列中显示的图像，一列在另一列之下。您链接到的文档中特别是什么错误？我提到了 Chrome 的问题。
我的意思是标签Known issues在不同的浏览器中有很多问题所以你必须小心。
是的，我读到了，但找不到与我所面临的问题相关的任何内容。无论如何，我认为问题出在inline-block（我的网格以前版本的一些残留物），我没有发现它是问题所在。感谢您的帮助。

标签： html css google-chrome css-multicolumn-layout

【解决方案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>

【讨论】：