如何將一個div分成兩部分，其中一個div佔用剩餘空間？

如何在XHTML/CSS 中使用Div 實現完美的水平分割

您已將div 嵌套在寬度為100% 的外部div 內，並且您希望將巢狀div 的寬度分成兩部分，一個div 佔據另一個div 後面的剩餘空間。問題是您不想指定第一個 div 的寬度，因為它的大小取決於其內容。

隱藏溢出的魔力

The解決方案在於使用溢出：隱藏；。此 CSS 屬性可防止與浮動元素相鄰的元素超出浮動範圍。

HTML 結構

如下調整HTML，用適當的ID 取代# 字元：

<div>

CSS< >

實現以下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;
}

IE 6 支援

用於IE 6 支援的可選CSS（如果必需）：

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

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

結果

透過這些更改，#inner2 將佔據剩餘的水平空間，確保在嵌套div。

以上是如何將一個div分成兩部分，其中一個div佔用剩餘空間？的詳細內容。更多資訊請關注PHP中文網其他相關文章！