網頁設計中如何容納固定寬度的div和剩餘空間的div？

容納固定寬度和剩餘Div

在網頁設計中，一個常見的挑戰是容納兩個div，其中一個具有特定的固定寬度，另一個需要動態調整佔據剩餘空間。

基於CSS 的解決方案

一種利用CSS 的有效方法：

. left {</p><pre class="brush:php;toolbar:false">width: 83%;

}

.right {

width: 16%;

}

此CSS 配置可確保此.left div 佔據可用寬度的83%，而.right div 佔據剩餘的16%，保留.left div 所需的固定寬度。

顯示：表格方法

或者，display: table 屬性提供了一個強大的解決方案：

<div class="right"> </div><br><div class="left"></div>

.left {</p><pre class="brush:php;toolbar:false">display: table-cell;
width: 83%;

}

.right {

display: table-cell;
width: 16%;

}

}

}透過設定將父容器的table 屬性和div 的table-cell 屬性設為table ，瀏覽器有效地建立了一個兩份元表格，其中固定寬度的div 出現在一個單元格中，剩餘空間動態填充另一個單元格。 結論CSS 和 display: table 方法都提供了有效的解決方案，解決了容納固定寬度 div 同時允許另一個 div 佔據剩餘空間的問題。最佳方法取決於具體要求和瀏覽器相容性考慮。

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