CSS中要让块平均分配是一种常见的需求。下面介绍一些常用的方法。
/*方法一:使用flex布局*/ .container { display: flex; justify-content: space-between; } /*如果块数不确定,可以使用flex-wrap属性*/ .container { display: flex; flex-wrap: wrap; justify-content: space-between; } /*方法二:使用网格布局*/ .container { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); grid-gap: 20px; } /*repeat(auto-fit,1fr))是设置每列最小宽度为200px,最大为1fr,自适应排列*/ /*方法三:使用calc()*/ .container div { width: calc(33.33% - 10px); /*需要考虑每个块之间的间隔,这里间隔为10px*/ margin-right: 10px; } /*如果块数不确定,可以使用:nth-child(n)选择器*/
以上三种方法都可以实现块平均分配的效果,需要根据实际情况选择合适的方法。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。