HTML 列数问题

Question

我正在使用列数来为我的图片库启用砌体。当我将列数设置为 3 时，它按预期工作。

当它是 3 时:

当我将它设置为 4 时出现问题。它似乎保持 3 并将空白设置为右侧的第 4 列。

当它是 4 时:

我不确定是什么问题。

* {
  margin: 0;
  padding: 0;
  border: 0;
}

html, body {
  height: 100vh;
}

#photos {
  line-height: 0;
  -webkit-column-count: 5;
  -webkit-column-gap: 0px;
  column-count: 4;
  column-gap: 0;
}

#photos img {
  width: 100% !important;
  height: auto !important;
}

<div id="photos">
  <img src="https://via.placeholder.com/150" alt="">
  <img src="https://via.placeholder.com/150" alt="">
  <img src="https://via.placeholder.com/150" alt="">
  <img src="https://via.placeholder.com/150" alt="">
  <img src="https://via.placeholder.com/150" alt="">
</div>

Answer 1

你不能用column-count实现你的愿望，因为你需要知道它是这样工作的数字是图像在HTML中的位置所以你可能需要在第四列添加更多的 img

我建议使用flex

#photos {
    display: flex;
    flex-wrap: wrap;
}

#photos img {
    width: 25%;
}

希望对你有帮助