如何僅使用 CSS 使兩個浮動 div 具有相同的高度？

在HTML/CSS 中使兩個浮動Div 高度相同

簡介

簡介

實作相等div 的高度可能具有挑戰性，尤其是當它們並排且具有不同內容時長度。一種常見的解決方法是使用表格，但這種方法在語義上可能不合適。

使用 CSS 創建等高 Div

要在不使用表格的情況下實現等高，CSS提供了幾種技術。一種方法涉及設置大的底部填充，用負底部邊距否定該填充，並用隱藏溢出的容器包圍 div。

實作

#container {
  overflow: hidden;
  width: 100%;
}

#left-col {
  float: left;
  width: 50%;
  background-color: orange;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

#right-col {
  float: left;
  width: 50%;
  margin-right: -1px; /* for IE compatibility */
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

示範此技術，考慮以下CSS 程式碼：

<div>

在HTML 中，建立div 容器和兩個子容器divs:

這種方法本質上強制兩個div具有相同的高度，即使它們包含不同數量​​的內容。大的底部填充和負邊距相互抵消，允許 div 只佔用它們需要的垂直空間。隱藏溢出的容器確保任何多餘的內容都不可見。

結論這種 CSS 技術提供了一種語義上正確的方法來在 HTML/ 中創建等高浮動 div CSS。它有效地模仿了表格的行為，而不會引入不必要的標記。

以上是如何僅使用 CSS 使兩個浮動 div 具有相同的高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！