如何使用 CSS 建立具有相同自動寬度的並排 Div？

CSS Side-by-Side Divs with Equal Auto Widths

Achieving equal auto widths for child DIVs within a parent DIV can be tricky with traditional float and width approaches. However, using the display: table property provides a modern solution that enables this functionality.

Solution using Display: Table

1. Set the parent DIV (#wrapper) to display as a table and enable a fixed table layout. This will ensure that child DIVs occupy equal widths.
2. Set the height of the parent DIV to specify the vertical space available.
3. For each child DIV, set the display property to table-cell to ensure they appear side-by-side and have the same height as the parent DIV.

CSS Example:

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

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

HTML Example:

<div>

Note:

• This solution is not compatible with IE7 and below.
• The provided JSFiddle examples demonstrate both three and two equal-width child DIVs.

以上是如何使用 CSS 建立具有相同自動寬度的並排 Div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！