如何使用 CSS 创建具有相同自动宽度的并排 Div？

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

在父 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 示例:

<div>

注意：

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

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