如何在 CSS 中实现并排 DIV 的自动宽度相等？

在 CSS 中实现并排 DIV 的相等自动宽度

您有一个包含多个子 DIV 的 HTML 父 DIV，并且您希望子 DIV 自动采用相同的宽度。下面是使用 display: table 属性实现此目的的解决方案：

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

#wrapper div {
    display: table-cell;
    height: 100px;
}

父 DIV 的 display: table 属性设置类似表格的结构。 table-layout:fixed 属性确保列（即子 DIV）具有固定宽度。子 DIV 的 display: table-cell 属性将它们放置在表格的“单元格”内。

此解决方案在除 IE7 之外的现代浏览器中有效。以下是一些示例：

• 三个 DIV：https://jsfiddle.net/g4dGz/
• 两个 DIV：https://jsfiddle.net/g4dGz/1/

以上是如何在 CSS 中实现并排 DIV 的自动宽度相等？的详细内容。更多信息请关注PHP中文网其他相关文章！