首页 > 代码库 > 负边距在布局中的使用
负边距在布局中的使用
看到这种效果你第一想法是什么?会不会是子元素设置margin-right,在遍历的时候nth-child(3n)还要设置为0,看看利用上面知识我们可以怎样处理
<style>
.wrap2{
width:320px;
border:dashed 1px orange;
}
.wrap2 .inner{
overflow:hidden;
margin-right:-10px;
}
.wrap2 .item{
float:left;
width:100px;
height:100px;
margin:10px 10px 10px 0;
background:blue;
}
</style>
<div class="wrap2">
<div class="inner">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
我们没有设置nth-child(3n)的边距为0,而是通过负边距使父元素“变大”。
负边距是不是很有意思,不很了解的少年们学起来吧!
参考
CSS布局奇淫巧计之-强大的负边距
转自Samaritans
负边距在布局中的使用
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。