如何使用 CSS 實現一個固定寬度、另一個填滿剩餘空間的並排 Div？

在 CSS 中實現並排 Div

當嘗試水平排列多個 div 時，可能會出現無縫對齊它們的挑戰。本文提供了一種利用 CSS Flexbox 來實現最大化頁面利用率的最佳佈局的解決方案。

問題：

目標是將兩個 div 並排放置，一個 div 保持 200px 的固定寬度，而另一個 div動態填充剩餘螢幕

解決方案：

這個佈局的關鍵是flexbox，一個強大的CSS屬性，允許靈活的項目排列。實作方法如下：

1. 建立一個父div並將其display屬性設定為flex：

   #parent {
     display: flex;
   }

2. 定義固定寬度的div並指定其width:

   #narrow {
     width: 200px;
     background: lightblue; /* Just for visibility */
   }

3. 將flex: 1 加到另一個div：

   #wide {
     flex: 1; /* Grows to fill remaining space */
     background: lightgreen; /* Just for visibility */
   }

透過利用Flexbox，您可以建立動態且靈活的佈局，其中 div 並排放置，從而優化可用螢幕空間。

以上是如何使用 CSS 實現一個固定寬度、另一個填滿剩餘空間的並排 Div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！