首页 > 其他 > 详细

负边距在布局中的使用

时间:2016-11-09 22:18:26      阅读:246      评论:0      收藏:0      [点我收藏+]
 

看到这种效果你第一想法是什么?会不会是子元素设置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

负边距在布局中的使用

原文:http://www.cnblogs.com/lianzhibin/p/6048903.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!