在做商城时，通常要做一列或多列购物列表，本博文实现购物列表中间有间隔，最右边无间隔的效果。
-
<body>
-
<div class="eg1">
-
<div class="main">
-
<img src="img/privilege1.jpg">
-
<img src="img/privilege2.jpg">
-
<img src="img/privilege3.jpg">
-
<img src="img/privilege4.jpg">
-
</div>
-
</div>
-
<div class="eg2">
-
<img src="img/privilege1.jpg">
-
<img src="img/privilege2.jpg">
-
<img src="img/privilege3.jpg">
-
<img src="img/privilege4.jpg">
-
</div>
-
<div class="eg3">
-
<img src="img/privilege1.jpg">
-
<img src="img/privilege2.jpg">
-
<img src="img/privilege3.jpg">
-
<img src="img/privilege4.jpg">
-
</div>
-
</body>
第一种方法：
里面盒子的宽度多于外面盒子的宽度一个间隔
-
body{
-
width: 1200px;
-
margin: 0 auto;
-
}
-
.eg1{
-
padding: 30px 0;
-
background: #E6E6E6;
-
margin-top: 20px;
-
.main{
-
font-size: 0;
-
width: 1220px;
-
img{
-
width: 285px;
-
margin-right: 20px;
-
}
-
}
-
}
第二种方法：
用nth-child(4n)把最后一个间隔去掉
-
body{
-
width: 1200px;
-
margin: 0 auto;
-
}
-
.eg2{
-
padding: 30px 0;
-
background: #E6E6E6;
-
margin-top: 20px;
-
font-size: 0;
-
img{
-
width: 285px;
-
margin-right: 20px;
-
&:nth-child(4n){
-
margin-right: 0;
-
}
-
}
-
}
第三种方法：
给盒子加个margin-right: -20px;把间隔去掉
-
body{
-
width: 1200px;
-
margin: 0 auto;
-
}
-
.eg3{
-
padding: 30px 0;
-
margin-right: -20px;
-
background: #E6E6E6;
-
margin-top: 20px;
-
font-size: 0;
-
img{
-
width: 285px;
-
margin-right: 20px;
-
}
-
}
average.zip
阅读(343) | 评论(0) | 转发(0) |
