如何在具有溢出：隱藏的嵌套 Div 中實現可變寬度分佈？

如何在巢狀Div 中實現可變寬度分佈

在xHTML/CSS 中，經常會遇到需要多個巢狀div 的場景水平對齊，內部div 根據其內容具有不同的寬度。這個問題探討了一個常見的挑戰：當內部 div 的寬度未指定且取決於其內容時，如何將剩餘的可用水平空間分配給其中一個。

要實現此效果，我們可以利用 CSS 屬性「溢位：隱藏；」。此屬性可防止與浮動元素相鄰的元素延伸到浮動後面，從而創建受控佈局。

考慮下面的HTML 結構：

<div>

要設定佈局，可以使用以下CSS應用：

#outer {
    overflow: hidden;
    width: 100%;
    border: solid 3px #666;
    background: #ddd;
}

#inner1 {
    float: left;
    border: solid 3px #c00;
    background: #fdd;
}

#inner2 {
    overflow: hidden;
    border: solid 3px #00c;
    background: #ddf;
}

透過設定「溢出：隱藏;」在「溢出：隱藏;」在「 outer”div 上，我們強制浮動的“inner1”div 保留在“outer”div 內。然後，「inner2」div 填滿剩餘的水平空間。

為了確保此版面配置在舊版的Internet Explorer（IE 6 和7）中運作，可以將下列附加CSS 與HTML 條件註解一起使用：

<!--[if lte IE 6]>
<style type="text/css">
    #inner2 {
        zoom: 1;
    }

    #inner1 {
        margin-right: -3px;
    }
</style>
<![endif]-->

此樣式可確保「inner2」div 在IE 6 中正確填滿剩餘空間，並調整「inner1」div 的邊距以補償「zoom」屬性所引入的間隙。

使用此配置，「inner1」div 將根據其內容動態調整其寬度，「inner2」div 將佔據剩餘的可用寬度，建立佈局，其中 div 與其各自的寬度水平對齊。

以上是如何在具有溢出：隱藏的嵌套 Div 中實現可變寬度分佈？的詳細內容。更多資訊請關注PHP中文網其他相關文章！