一、使用Flexbox实现平均分布
.container { display: flex; justify-content: space-between; } .container div { flex-basis: calc(33.33% - 10px); }
Flexbox布局是常用的实现平均分布的方式。在父容器中设置display: flex;即可使用弹性盒子布局。justify-content: space-between;可以让子元素之间平均分布。然而,flex-basis只是子元素占据的空间的初始值,如果子元素的内容过多,它仍然可以溢出.
二、使用Grid实现平均分布
.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 10px; } .container div { width: 100%; }
使用CSS网格布局也可以实现平均分布。将父容器设置为display: grid;,再设置grid-template-columns为自适应列数,每列的最小宽度为200px,宽度比例为1:1,最终达到平均分布的效果。此外,使用grid-gap设置子元素之间的边距.
三、使用定位实现平均分布
.container { position: relative; margin: 0 auto; max-width: 1200px; } .container div { position: absolute; left: calc(33.33% - 10px); width: calc(33.33% - 10px); } .container div:nth-child(2) { left: calc(66.66% + 20px); }
使用绝对定位和calc()函数也可以实现平均分布。在父容器中设置position: relative;和max-width,子元素使用position: absolute;进行绝对定位,并使用calc()函数计算子元素的left和width,实现平均分布。如果需要3个子元素,可以复制第二个子元素的样式,并设置left和width为适当值.
四、使用伪元素实现平均分布
.container { position: relative; margin: 0 auto; max-width: 1200px; } .container::before { content: ""; display: table; } .container::after { content: ""; display: table; clear: both; } .container div { float: left; width: calc(33.33% - 10px); margin-right: 10px; } .container div:last-child { margin-right: 0; }
使用伪元素也可以实现平均分布。在父容器中使用:before和:after伪元素,分别设置display为table和clear:both,以清除浮动。子元素使用float: left进行左浮动,并设置width为子元素空间的初始值(注意减去间距),padding或border-box可以解决子元素内容过多压缩的问题.
五、使用flex-grow实现平均分布
.container { display: flex; } .container div { flex: 1; }
使用flex-grow属性也可以实现平均分布。在父容器中设置display: flex;,子元素添加flex: 1;即可让子元素平均分布。如果子元素的空间不足,它们会等比例地放大以填满剩余的空间.