CSS-清除多行盒子排列每行最后一个盒子外边距属性

lychee z

已于 2022-03-21 08:30:15 修改

阅读量2.6k

点赞数 3

分类专栏： CSS 文章标签：前端 css3 css

于 2022-03-21 00:33:10 首次发布

本文链接：https://blog.youkuaiyun.com/Lycheezzj/article/details/123624878

版权

CSS 专栏收录该内容

1 篇文章

订阅专栏

在项目中我曾经碰到过多行盒子排列，为了盒子之间的间隔从而添加了margin-right属性，但在每一行的最后一个元素的margin-right属性总是会影响到盒子的布局，从而导致本应该出现在当前行最后一个的盒子因为该属性导致空间不够从而被换行到下一行进而导致的UI显示问题。
通过多次的实践思考我想到了几种解决的办法，也因此希望在这里进行心得记录，其具体的解决方法如下：

①使用结构伪类选择器进行筛选
nth-child()
在类名为test的盒子样式上则如下所示：

.test:nth-child(4n){
	margin-right: 0;
}

在nth-child()当中n是从0开始，所以当可以计算出一行会有多少个盒子时则可以使用倍数进行选取，比如上面4n就是代表每行4个盒子

②在父级盒子上使用calc函数

<div class="father">
	<div class-"block">
		<div class="son">1</div>
		<div class="son">2</div>
		<div class="son">3</div>
		<div class="son">4</div>
		<div class="son">5</div>
		<div class="son">6</div>
		<div class="son">7</div>
		<div class="son">8</div>
	</div>
</div>

在如上的html中我们可以使用一个类名为block的盒子来进行隔离，从而使用下面所示的css样式

.father {
	width: 800px;
	height: 600px;
	........
}
.block {
	width: calc(100% + 25px);
}
.son {
	margin-right: 25px;
	margin-bottom: 10px;
	........
}

在这里我为每个盒子都设定margin-right属性为25px，因此在每一行的最后一个盒子就会因为对于的margin-right属性从而导致被迫换行，而在father和son两个盒子之间使用一个content盒子进行间隔，然后利用calc函数计算宽度值为father + margin-right的属性值，这样就可以间接去除每一行最后一个盒子的margin-right属性