如何讓div佔據固定寬度div後的剩餘空間？

如何調整兩個Div，一個具有固定寬度，另一個佔用剩餘空間

使用兩個div 容器時，其中一個需要特定的寬度，而另一個應該動態佔用剩餘空間，有幾種方法可以實現這種佈局。讓我們探索兩種方法：

使用顯示：表格或表格單元格

透過此方法，我們使用CSS 顯示屬性來建立類似表格的結構：

<code class="html"><div class="right"></div>
<div class="left"></div></code>

<code class="css">.right {
    float: right;
    width: 250px;
    display: table-cell;
    vertical-align: middle;
    height: 100%;
}

.left {
    display: table-cell;
    vertical-align: middle;
    overflow: hidden;
}</code>

在這種情況下，「右」div 的固定寬度為250px，而「左」div 則因為其「overflow：hidden」屬性而佔用剩餘空間。

使用浮動和百分比寬度

另一種方法涉及使用CSS浮動屬性並將div的寬度設定為百分比：

<code class="html"><div class="right"></div>
<div class="left"></div></code>

<code class="css">.left {
    float: left;
    width: 83%;
    min-height: 50px;
    margin-right: 10px;
}

.right {
    float: right;
    width: 16%;
    min-height: 50px;
    height: 100%;
}</code>

這裡，「左」div 佔據了83% 的可用寬度，為「右」div 留下了16% 的固定寬度。

範例示範

檢查在 JSFiddle 上進行以下現場演示，以查看這些方法的實際效果：http://jsfiddle.net/SpSjL/

以上是如何讓div佔據固定寬度div後的剩餘空間？的詳細內容。更多資訊請關注PHP中文網其他相關文章！