首頁 > web前端 > css教學 > 如何讓浮動子div的高度與父母的高度相符?

如何讓浮動子div的高度與父母的高度相符?

DDD
發布: 2024-12-14 02:53:13
原創
953 人瀏覽過

How to Make Floated Child Div Heights Match Their Parent's Height?

平衡浮動子層級Div 高度以符合父級高度

問題陳述:

問題陳述:
<div class="parent">
    <div class="child-left floatLeft">
    </div>

    <div class="child-right floatLeft">
    </div>
</div>
登入後複製

問題陳述:

在包含以下HTML的頁面結構:

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}
登入後複製
隨著左子 div 的內容擴展,父 div 的高度也會相應增加。然而,child-right div 的高度保持不變,這就提出了一個問題:如何讓 child-right 的高度與父級的高度相等?

.child-right {
    background: green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}
登入後複製
解:

要使子右側div 的高度與其父級的高度相匹配,請將下列CSS 屬性應用於父級element:

這些屬性確保父元素具有定義的高度並包含浮動的子元素。接下來,將以下CSS 屬性新增至.child-right 類別:

    這些屬性為child-right div 提供絕對位置,將其高度設定為100% 並將其放置在靠右邊緣的位置。父級。
  • 有關創建等高列的更多詳細示例和信息,請參閱參考部分中提供的鏈接
參考文獻:參考文獻:參考文獻:參考文獻:參考文獻:[等高列的CSS範例](連結到外部資源)[等高資訊專欄](連結到外部資源)

以上是如何讓浮動子div的高度與父母的高度相符?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板