如何在 CSS 中使用浮動元素建立等高列？

使用浮動元素建立等高列

在父div 包含兩個子div 的頁面佈局中，其中一個子div 可能會有更多內容，導致父級div 的高度擴大。但是，另一個子 div 可能不會相應地調整其高度。這個問題可以透過應用特定的 CSS 屬性來解決。

要實現兩個子div 的高度相等：

1. 父元素：

   • 新增溢出：隱藏隱藏以防止任何內容溢出到外面父級。
   • 設定位置：相對，以實現下一個子級的絕對定位。
   • 使用寬度：100% 以確保父級跨越整個可用寬度。

2. .child-right元素：

   • 為視覺分析指定唯一的顏色（例如背景：綠色）。
   • 設定高度：100% 以確保高度與父級相符。
   • 使用 width: 50% 將寬度設定為父級的一半width。
   • 加入position:absolute以在父級內進行絕對定位。
   • 設定right: 0使其與父級的右邊緣齊平。
   • 設定top: 0 將其定位到與父級的頂部邊緣齊平。

透過應用這些 CSS屬性，兩個子 div 將具有相同的高度，確保視覺上平衡的佈局。

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