如何使用 CSS 创建宽度相等的并排 Div？-css教程-PHP中文网

如何使用 CSS 创建宽度相等的并排 Div？

Barbara Streisand

发布： 2024-11-23 03:21:09

原创

356 人浏览过

How to Create Side-by-Side Divs with Equal Widths Using CSS?

使用 CSS 自动等宽的并排 Div

要创建在父 div 中自动采用相等宽度的子 div，利用 CSS 的 display: table 属性的力量。这种方法虽然不被 IE7 支持，但在现代浏览器中有效地达到了预期的结果。

解决方案：

设置父级 div 显示：table 和表格布局：固定。这会建立一个类似表格的结构。
设置要显示的子 div：table-cell。这会将它们视为表格单元格，从而获得相等的宽度。
根据需要调整父 div 的宽度和高度属性。

示例代码：

CSS：

#wrapper {
    display: table;
    table-layout: fixed;

    width:90%;
    height:100px;
    background-color:Gray;
}
#wrapper div {
    display: table-cell;
    height:100px;
}

登录后复制

HTML：

<div>

登录后复制

演示：

访问以下 JSFiddle查看实际解决方案的链接：

三个 div：http://jsfiddle.net/g4dGz/
两个 div：http://jsfiddle.net/g4dGz/1 /

以上是如何使用 CSS 创建宽度相等的并排 Div？的详细内容。更多信息请关注PHP中文网其他相关文章！