最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS实现多列等宽的方法详解
时间：2022-06-25 11:06:31 编辑：袖梨 来源：一聚教程网
实现方法有css与js三种方法了，下面我们一起来看看．
网页中多列等宽是很常见的布局，一般使用百分比的 width 属性即可轻松实现。
但是我真正想要说得是，在不明确到底有多少元素的情况下实现多列等宽，比如网站的幻灯片导航：
幻灯片导航的数量会随着幻灯片的数量变化，元素数量不是固定的。需要完全等宽，并且占满整个父级元素。
我想出了三种解决方案，下边分别介绍。
display: table-cell
第一种方法利用 display 属性的 table-cell 值，把元素变成表格，就可以等宽了。
第1列 第1列 第1列 第1列
第2列 第2列 第2列 第2列
第3列 第3列 第3列 第3列
第4列 第4列 第4列 第4列
这种方法是比较好的，兼容到 IE8。
权衡兼容性和复杂程度之后我选择了这种方案。
box-flex
box-flex 属性是 CSS3 的新东西，他可以把父元素的宽度分配给子元素，就像分数一样。
假设一个容器的宽度是 1200px，里边有三个子元素。
如果三个子元素的 box-flex 属性都设置成 1，那么它们将平分 1200px，也就是每个元素会获得 400px 的宽度。
如果一个元素的 box-flex 属性设置成 2，其余的两个设置成 1，那么设置成 2 的元素将会有 600px 的宽度，设置成 1 的两个元素会有 300px 的宽度。
看到这里，就会发现 box-flex 属性实在是太好了有木有，用它实现多列等高轻而易举，而且非常好理解。
第1列
第2列
第3列
第4列
可惜这种方法兼容性不佳，只有 IE10+ 和 Chrome 等浏览器支持，但这么强大的属性还是了解一下比较好。
JavaScript
最后一种方法就不是纯 CSS 了，需要使用 JS 实现，这种方法兼容性最好，支持几乎目前所有浏览器，但是比较麻烦。
第1列
第2列
第3列
第4列
相关文章
- 人们熟悉的寄居蟹属于以下哪种分类 神奇海洋11月21日答案 11-21
- 第五人格11.22共研服有什么更新 11月22日共研服更新内容介绍 11-21
- 原神恰斯卡怎么培养 11-21
- 无期迷途四星装束是谁 11-21
- 王者荣耀帝丹高中校服怎么获得 11-21
- 光遇姆明季后续版本怎么玩 11-21