既分且合，左右开弓，任意调整左右盒宽的几种方法

前端

2023-09-27 16:51:53

固定宽度和自适应宽度盒子并存布局的终极指南

在当今响应式网页设计的时代，我们经常需要同时使用固定宽度和自适应宽度盒子来创建美观且功能齐全的布局。理解和掌握这些布局技术至关重要，因为它使我们能够创建跨各种设备看起来和工作都很棒的网站。

固定宽度盒子 vs 自适应宽度盒子

固定宽度盒子 具有预定义的宽度，不会随着其内容而改变。它们在创建具有固定结构的元素（例如侧边栏或页脚）时很有用。

自适应宽度盒子 的宽度根据其内容而自动调整。它们在创建灵活的元素（例如文本框或图像容器）时很有用，这些元素需要适应不同长度的内容。

布局方法

有几种方法可以将固定宽度和自适应宽度盒子并存布局：

1. float

float 方法是最简单的，使用 float 属性将固定宽度盒子浮动到一边，然后将自适应宽度盒子填充剩余空间。

代码示例：

<div class="fixed-width-box">固定宽度盒子</div>
<div class="auto-width-box">自适应宽度盒子</div>

<style>
.fixed-width-box {
  width: 200px;
  float: left;
}

.auto-width-box {
  float: left;
}
</style>

2. display

display 方法使用 display: inline-block 属性将固定宽度盒子和自适应宽度盒子并排显示。

代码示例：

<div class="fixed-width-box">固定宽度盒子</div>
<div class="auto-width-box">自适应宽度盒子</div>

<style>
.fixed-width-box {
  width: 200px;
  display: inline-block;
}

.auto-width-box {
  display: inline-block;
}
</style>

3. flex 布局

flex 布局是使用 flex 属性创建灵活布局的强大方法。我们可以通过将固定宽度盒子设置为 flex-basis: 200px 和 auto-width 盒子设置为 flex: 1 来实现并存布局。

代码示例：

<div class="parent-box">
  <div class="fixed-width-box">固定宽度盒子</div>
  <div class="auto-width-box">自适应宽度盒子</div>
</div>

<style>
.parent-box {
  display: flex;
}

.fixed-width-box {
  flex-basis: 200px;
}

.auto-width-box {
  flex: 1;
}
</style>

4. grid 布局

grid 布局是另一种用于创建灵活布局的现代方法。我们可以通过将固定宽度盒子设置为 grid-column-width: 200px 和 auto-width 盒子设置为 auto-flow: column 来实现并存布局。

代码示例：

<div class="parent-box">
  <div class="fixed-width-box">固定宽度盒子</div>
  <div class="auto-width-box">自适应宽度盒子</div>
</div>

<style>
.parent-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.fixed-width-box {
  grid-column-width: 200px;
}

.auto-width-box {
  auto-flow: column;
}
</style>