[分享]css元素平均分布方法

在CSS中，有时需要将多个元素平均分布在一个容器中，如何实现呢？下面介绍几种方法：1. 使用flex布局使用flex布局可以很方便地实现元素的平均分布，首先在容器上添加display:flex属性，让...

在CSS中，有时需要将多个元素平均分布在一个容器中，如何实现呢？下面介绍几种方法：
1. 使用flex布局
使用flex布局可以很方便地实现元素的平均分布，首先在容器上添加display:flex属性，让容器变成flex容器。然后给容器内的元素添加flex属性，即可实现均分布。
代码如下：
<div style="display:flex;">
<div style="flex:1;"></div>
<div style="flex:1;"></div>
<div style="flex:1;"></div>
</div>
2. 使用table布局
使用table布局同样可以实现元素的平均分布，将容器设置为表格，将元素设置为表格单元格，然后设置单元格的宽度为百分比即可。
代码如下：
<div style="display:table; width:100%;">
<div style="display:table-cell; width:33.33%;"></div>
<div style="display:table-cell; width:33.33%;"></div>
<div style="display:table-cell; width:33.33%;"></div>
</div>
3. 使用float布局
使用float布局也可以实现元素的平均分布，将元素设置为浮动，然后将容器的宽度设置为元素宽度的整数倍，将margin设置为负的元素宽度的一半，即可实现均分布。
代码如下：
<div style="width:300px;">
<div style="float:left; width:33.33%; margin-right:-100px;"></div>
<div style="float:left; width:33.33%; margin-right:-100px;"></div>
<div style="float:left; width:33.33%;"></div>
</div>
以上就是三种元素平均分布的方法，可以根据实际情况选择适合自己的方法来实现布局。