css如何实现带有右边距的浮动子元素列表

发布时间:2022-03-21 14:50:40 作者:小新
来源:亿速云 阅读:125

小编给大家分享一下css如何实现带有右边距的浮动子元素列表,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

带有右边距的浮动子元素列表

css如何实现带有右边距的浮动子元素列表

看到这种效果你第一想法是什么?会不会是子元素设置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如何实现带有右边距的浮动子元素列表”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

推荐阅读:
  1. CSS块元素-内联元素-浮动
  2. CSS同级元素浮动怎么实现

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:css如何使用普通元素实现多列列表

下一篇:Revit怎么创建和切换标记

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》