如何並排放置兩個 Div，其中一個 Div 具有固定寬度，而另一個 Div 則擴展以填充剩餘空間？

在 CSS 中並排放置兩個 Div

使用 HTML 和 CSS 時，需要將元素彼此相鄰放置很常見。本文深入研究了一種特定場景，其目標是創建兩個水平相鄰的 div，其中一個 div 被限制為特定寬度，而另一個則佔據剩餘的可用空間。

Flexbox 解決方案

現代瀏覽器支援名為 flexbox 的 CSS 屬性，它提供了一種以靈活的方式佈局元素的強大方法。若要實現所需的佈局，請考慮使用 Flexbox。以下是示範此方法的程式碼片段：

<div>
<pre class="brush:php;toolbar:false">#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: lightblue;
}
#wide {
  flex: 1;
  background: lightgreen;
}

在此範例中：

• #parent 是設定 Flexbox 版面的包含 div。
• #narrow 的寬度固定為 200px。
• #wide 設定為成長並佔據由於 flex: 1 屬性，螢幕上剩餘的可用空間。

透過利用 flexbox，您可以輕鬆建立並排 div，無需複雜的寬度計算或額外的 CSS 規則。此方案簡潔靈活，適用於多種場景。