具有相等自动宽度的 CSS 并排 Divs

在父 DIV 中实现子 DIV 的相等自动宽度可能会很棘手传统的浮动和宽度方法。但是，使用 display: table 属性提供了启用此功能的现代解决方案。

使用 Display: Table 的解决方案

1. 设置父 DIV (#wrapper ) 显示为表格并启用固定表格布局。这将确保子 DIV 占据相同的宽度。
2. 设置父 DIV 的高度以指定可用的垂直空间。
3. 对于每个子 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 示例：

注意：
此解决方案与 IE7 及以下版本不兼容。
提供的 JSFiddle 示例演示了三个和两个等宽子级DIV。