如何讓兩個浮動子 DIV 的高度相等？

均衡浮動子DIV 的高度

問題：

問題：

在頁中父親DIVDIV包含兩個浮動子DIV，只有第一個子DIV擴展其高度當其中的內容增加時，以符合父級的高度。第二個子 DIV 保持預設高度，外觀不均勻。

解決方案：

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.child-right {
    background: green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

確保第二個子DIV (.child-right) 擴展到與其父級高度相同，將以下CSS 應用於父級.parent 和子級.child-right elements:

• 說明：
• 在父元素上設定溢位：隱藏可防止子 DIV 的內容溢位父元素的邊界。 🎜>
相對定位父元素允許子 DIV 在其內部使用絕對定位
• 在父元素上設定 width: 100% 可確保其佔據其容器的整個寬度。
• 對於子 DIV，設定 height: 100% 使其擴展到高度
• width: 50% 確保它佔據父級的一半width。

使用 right: 0 和 top: 0 進行絕對定位，將子 DIV 放置在父級 DIV 的右上角，與右邊緣對齊。

透過使用此CSS 屬性的組合，浮動的子 DIV 將擴展以匹配其父 DIV 的高度，從而導致兩個子 DIV 之間的高度分佈相等。

以上是如何讓兩個浮動子 DIV 的高度相等？的詳細內容。更多資訊請關注PHP中文網其他相關文章！