CSS实现多列等宽的方法详解

实现方法有css与js三种方法了，下面我们一起来看看．

网页中多列等宽是很常见的布局，一般使用百分比的 width 属性即可轻松实现。

 

 

我想出了三种解决方案，下边分别介绍。

display: table-cell

第一种方法利用 display 属性的 table-cell 值，把元素变成表格，就可以等宽了。

这种方法是比较好的，兼容到 IE8。

权衡兼容性和复杂程度之后我选择了这种方案。

box-flex

box-flex 属性是 CSS3 的新东西，他可以把父元素的宽度分配给子元素，就像分数一样。

假设一个容器的宽度是 1200px，里边有三个子元素。

如果三个子元素的 box-flex 属性都设置成 1，那么它们将平分 1200px，也就是每个元素会获得 400px 的宽度。

如果一个元素的 box-flex 属性设置成 2，其余的两个设置成 1，那么设置成 2 的元素将会有 600px 的宽度，设置成 1 的两个元素会有 300px 的宽度。

看到这里，就会发现 box-flex 属性实在是太好了有木有，用它实现多列等高轻而易举，而且非常好理解。

可惜这种方法兼容性不佳，只有 IE10+ 和 Chrome 等浏览器支持，但这么强大的属性还是了解一下比较好。

JavaScript

最后一种方法就不是纯 CSS 了，需要使用 JS 实现，这种方法兼容性最好，支持几乎目前所有浏览器，但是比较麻烦。