如何使用 CSS Flexbox 并排放置两个 Div？

使用 CSS 并排放置两个 Div

在 Web 开发中，需要并排放置元素。在 CSS 中实现此目的的一种方法是通过 Flexbox。

Flexbox 方法

Flexbox 允许您以灵活的网格状结构布局元素。要将两个 div 彼此相邻放置：

1. 将父容器设置为 Flex： 将 display: flex 添加到父 div。这将启用 Flexbox 布局。
2. 定义窄 Div： 对于宽度应为 200 像素的 div，将其宽度设置为 200 像素。此外，您还可以设置其可见性。
3. 允许左侧 Div 填充剩余空间： 在剩余的 div 上使用 flex: 1。此属性告诉浏览器增大 div 以占据父容器内的剩余可用空间。

#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: lightblue;
}
#wide {
  flex: 1;
  background: lightgreen;
}

<div><p>通过遵循此方法，您可以轻松并排放置两个 div，一个具有固定宽度，另一个填充剩余的屏幕空间。</p></div>

以上是如何使用 CSS Flexbox 并排放置两个 Div？的详细内容。更多信息请关注PHP中文网其他相关文章！