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

使用列数无法实现您的愿望，因为您需要知道它的工作原理如下：数字是HTML中图像的位置，因此您可能需要在第四栏中添加更多img

我建议使用flex

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

#photos img {
    width: 25%;
}

希望有帮助