如何使用CSS在每行显示不同数量的项目？类似于金字塔样式。假设这些数字是图片。我用的是ACF图库。你有什么想法吗？也许用flexbox？
j9per5c41#
您可以按如下方式使用flexbox和flex：
.gallery { display: flex; flex-wrap: wrap; } .gallery > img { flex: calc(100%/3); /* 3 images per row */ min-width: 0; outline:1px solid red; } /* until the 9th 4 images per row */ .gallery > :nth-child(-n + 9) { flex: calc(100%/4); } /* until the 5th 5 images per row */ .gallery > :nth-child(-n + 5) { flex: calc(100%/5); }
<div class="gallery"> <img src="https://picsum.photos/id/1058/400/200"> <img src="https://picsum.photos/id/1018/400/200"> <img src="https://picsum.photos/id/1016/400/200"> <img src="https://picsum.photos/id/1058/400/200"> <img src="https://picsum.photos/id/1018/400/200"> <img src="https://picsum.photos/id/1016/400/200"> <img src="https://picsum.photos/id/1058/400/200"> <img src="https://picsum.photos/id/1018/400/200"> <img src="https://picsum.photos/id/1016/400/200"> <img src="https://picsum.photos/id/1058/400/200"> <img src="https://picsum.photos/id/1018/400/200"> <img src="https://picsum.photos/id/1016/400/200"> </div>
1条答案
按热度按时间j9per5c41#
您可以按如下方式使用flexbox和flex：