如何僅使用 CSS 使浮動 Div 等高？

修正HTML/CSS 中的浮動Div 高度差異

在Web 開發領域，使用浮動div 時會出現一個常見的挑戰：確保它們的高度相等。這個難題通常可以使用 HTML 表格來解決，但對語意正確性的擔憂仍然存在。

首選解決方案在於 CSS 的力量。透過實現特定的樣式組合，我們可以實現等高浮動div：

1. Overflow Hidden：將div包裹在父div中，並使用overflow：hidden。這將 div 限制在指定區域內，防止它們超出其邊界。
2. 底部填充和負邊距：對 div 應用慷慨的底部填充，例如 500em。這會在 div 下方建立一個較大的虛擬空間。
3. 負底部邊距：增加等於填滿值的負邊距。這會將 div 向上移動，本質上抵消了填充。

以下CSS 片段舉例說明了這種方法：

#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;
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

透過採用這種技術，我們可以確保浮動div 自動調整它們的高度與最高的內容相匹配，創造出令人愉悅的視覺一致性。

以上是如何僅使用 CSS 使浮動 Div 等高？的詳細內容。更多資訊請關注PHP中文網其他相關文章！