CSS 中并排 Div 的等宽
在 HTML 中,组织父容器中的元素通常是使用 div 元素来实现的。然而,以相等的宽度并排对齐多个子 div 可能会带来挑战。
考虑以下 HTML 结构:
在此示例中,子 div 并排对齐,但它们具有任意宽度。要实现相等的宽度,可以使用 CSS 魔法 display: table 属性。
此 CSS 解决方案有几个关键功能:
- 集合父 div (#wrapper) 显示为表格 (display: table) 并设置 table-layout:fixed 以确保相等的列宽。
- 设置子 div (#wrapper div) 显示为表格单元格(显示:表格单元格)高度相等。
优点:
- 适用于现代浏览器(不支持 IE7)
- 根据可用空间自动调整列宽
- 允许使用不同数量的子div进行灵活布局
实例:
- 两个 Div:[JSFiddle](https://jsfiddle.net/g4dGz/1/)
- 三个 Div:[JSFiddle](https://jsfiddle.net/g4dGz/)
以上是如何在 CSS 中使并排的 Div 具有相等的宽度?的详细内容。更多信息请关注PHP中文网其他相关文章!