欢迎大家来到IT世界,在知识的湖畔探索吧!
为了不引入 HTML 标签自身的样式,本文未考虑 HTML 语义化的提倡,以使得行文与示例代码更加简洁。这是文章写作需要,而非代码风格示范。
在开发中我们经常会遇到关于如何展示列表的问题,例如:
- 图片选择器列表
- 人员部门选择列表
- 工作状态列表
通用方法
为了让其看起来更加舒适美观,通常我们会在每个列表项上添加 margin-right 和 margin-bottom 属性来隔开它们,然后一行超过容器长度后进行换行
那么在各种情况下,如何处理列表项中 margin-right 和 margin-bottom ,让列表间隔和换行看起来更加自然美观是本篇的重点
各种情况下的布局
元素宽度已知,即知道每行最多多少个,且所有元素都在一个容器中
- 思路:item 在一个容器中,每第三个去掉 margin-right,最后三个取消 margin-bottom(如最后一行不满 3 个也不影响)
- 关键代码
<div class='container'> <div class='item'>宽度已知,最多放三个</div> <div class='item'>宽度已知,最多放三个</div> <div class='item'>宽度已知,最多放三个</div> ... </div> <style> /* scss code */ .container { .item { margin-right: 30px; margin-bottom: 20px; &:nth-child(3n) { margin-right: 0; } &:nth-last-child(-n+3) { margin-bottom: 0; } } } </style>
欢迎大家来到IT世界,在知识的湖畔探索吧!
- 运行截图
4. 完整代码: 元素宽度已知,所有元素都在一个容器元素宽度已知 或 未知,且元素按照行数在相应容器中
- 思路:最后一个 container 去掉 margin-bottom,最后一个 item 去掉 magin-right
- 关键代码
欢迎大家来到IT世界,在知识的湖畔探索吧!<div class='container'> <div class='item'></div> <div class='item'></div> </div> <div class='container'> <div class='item'></div> <div class='item'></div> <div class='item'></div> </div> <div class='container'> <div class='item'></div> </div> <style> /* scss code */ .container { margin-bottom: 20px; &:last-child { margin-bottom: 0; } .item { margin-right: 30px; &:last-child { margin-right: 0; } } } </style>
- 运行截图
- 完整代码: 元素宽度已知或未知,且按照行数在相应容器
元素宽度未知,即不知道一行最多多少个,且所有元素都在一个容器中,常见于 flex 布局
法1:Flex 布局
- 思路:利用 flex 布局的 justify-content 主轴属性来控制元素的间距
- 缺点:flex 虽然强大,但是面对 长度不定的列表项布局 还是不能很好满足要求
- 关键代码
<div class='container'> <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> <style> /* scss code */ .container { display: flex; flex-wrap: wrap; justify-content: space-between; /* 可以尝试其他值,但效果仍不好 */ .item { /* margin-right: 30px; 可以不用 m-r,由 flex 来控制左右间距 */ margin-bottom: 20px; } }
- 运行截图
- 完整代码: 元素宽度已知或未知,且按照行数在相应容器
法2:负margin
- 接下来介绍 负margin 方法,可以很好的解决 长度不定的列表项布局 问题
- 思路:用一个 wrapper 包在最外层,container 设置 负的 margin 来抵消 item 的 外边距
参考链接: segmentfault.com/q/101000000…
- 关键代码
欢迎大家来到IT世界,在知识的湖畔探索吧!<div class="wrapper"> <div class='container'> <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> <style> /* scss code */ .wrapper { padding: 10px; border: 2px solid rgb(240, 103, 103); .container { display: flex; flex-wrap: wrap; margin-right: -30px; margin-bottom: -20px; .item { margin-right: 30px; margin-bottom: 20px; } } } </style>
- 运行截图
- 完整代码: 法2:元素宽度未知,且所有元素都在一个容器
总结
多多利用 css3 属性来帮助我们更好的布局列表,避免使用 js 控制列表项,做到 css 与 js 解耦,更利于项目的维护
以上可能未包含所有情况,欢迎提出或者分享其他更好的解决办法.
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/37453.html