我一直在尝试为我的网站构建一个纯 CSS 图片库。但是,列显示不正确,我找不到原因。
这是我看到的。
Chrome 和 FF 都为我生成了相同的 View 。当我稍微改变分辨率时,它变成了这个。
但它的范围非常小,所以当我将页面再缩小几个像素时,方框会回到它们的初始位置(第一张图片)。
这是我正在使用的 CSS:
.media-container {
column-count: 6;
column-gap: 3%;
}
.media-container .item {
margin-bottom: 20px;
background-color: grey;
display: inline-block;
}
.media-container .item img {
width: 100%;
opacity: 0;
}
<div class="media-container">
<div class="item"><img src="image1.jpg" /></div>
<div class="item"><img src="image2.jpg" /></div>
<div class="item"><img src="image3.jpg" /></div>
<div class="item"><img src="image4.jpg" /></div>
. . .
</div>
这是什么原因,我该如何解决?
最佳答案
如果可能,我建议在这种情况下使用 CSS 网格:
.media-container {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 3%;
}
关于html - CSS 列显示不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67047870/