如何在不使第一列消失的情况下隐藏列数中的第一项？

Question

我使用脚本从帖子中获取所有图像，并将它们放置在DIV中。我用column-count: 3设置样式。然后，我用:first-of-type { display:none }隐藏第一张图像。但是，这样做实际上会隐藏第一列，或者即使第一列中还有其他图像也会导致第一列折叠。

.gallery-masonry { column-count: 3; column-gap: 1rem; }
.gallery-masonry img { width: 100% !important; height: auto !important; margin: 0 0 1rem 0; }
.gallery-masonry img:first-of-type { display: none; }

<div class="gallery-masonry">
     <img src="xxxxx"/>
     <img src="xxxxx"/>
     <img src="xxxxx"/>
     <img src="xxxxx"/>
     <img src="xxxxx"/>
</div>

是否有解决此问题的方法？

Answer 1

您可以改用visibility: hidden;。

.gallery-masonry { column-count: 3; column-gap: 1rem; }
.gallery-masonry img { width: 100% !important; height: auto !important; margin: 0 0 1rem 0; }
.gallery-masonry img:first-of-type { visibility: hidden; }

<div class="gallery-masonry">
     <img src="https://via.placeholder.com/100?text=1"/>
     <img src="https://via.placeholder.com/100?text=2"/>
     <img src="https://via.placeholder.com/100?text=3"/>
     <img src="https://via.placeholder.com/100?text=4"/>
     <img src="https://via.placeholder.com/100?text=5"/>
     <img src="https://via.placeholder.com/100?text=6"/>
     <img src="https://via.placeholder.com/100?text=7"/>
     <img src="https://via.placeholder.com/100?text=8"/>
     <img src="https://via.placeholder.com/100?text=9"/>
</div>