首頁  >  文章  >  web前端  >  如何將一個div分成兩部分,其中一個div佔用剩餘空間?

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

DDD
DDD原創
2024-11-07 22:50:03399瀏覽

How to Split a Div into Two Portions with One Div Taking Up the Remaining Space?

如何在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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn