如何并排放置两个 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 规则。该方案简洁灵活，适用于多种场景。