文章/答案/技术大牛

发布

问每行显示不同的项目数
EN

Stack Overflow用户

提问于 2022-08-15 08:43:13

回答 1查看 117关注 0票数 0

如何使用CSS显示每行不同数量的项目？有点像金字塔的风格。

1      2        3       4        5

   6        7        8       9          
       
      10        11       12

假设这些数字是图像。我在使用ACF画廊。

你有什么想法吗？或者用挠性盒？

谢谢你！！

css

flexbox

grid

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-08-15 09:09:26

您可以使用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

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73358655

复制

相似问题

问每行显示不同的项目数
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问每行显示不同的项目数EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问每行显示不同的项目数
EN