开发需求的遇到的排版问题
如下图:
固定宽度的容器,容器内有N个元素,有些元素可能会根据其他元素的选择来判断展示还是隐藏;
问题: 双数的时候固定每行2列,每个元素固定宽度, 如果是单数的时候 最后一个元素需要独占一行;
.itemClassName:nth-child(odd):last-child
即可
.container
width 500px
height 400px
border 5px solid red
margin-bottom 50px
display flex
gap 30px
flex-wrap wrap
justify-content space-between
align-content flex-start
.item
width 200px
height 100px
border 5px solid blue
&:nth-child(odd):last-child
width 100%
10 回答11.1k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
3 回答1.8k 阅读✓ 已解决
5 回答1.9k 阅读
.list .item:last-child:not(:nth-child(2n))
用这个选择器,选择最后一个元素并且非 2n 的,然后写样式就好了。举个例子
当为 2N 时