实现两栏布局左边固定右边自适应，左右不重叠

实现两栏布局左边固定右边自适应，左右不重叠

实现两栏布局，左边固定宽度，右边自适应宽度，并且左右不重叠，是网页布局中的常见需求。以下是几种常用的实现方法：

1. 使用 Flexbox 布局

实现原理

• 将父容器设置为 Flex 容器。
• 左边固定宽度，右边设置 flex: 1 使其自适应剩余空间。

代码示例

<div class="container">
  <div class="left">左边固定宽度</div>
  <div class="right">右边自适应宽度</div>
</div>

.container {
  display: flex; /* 设置为 Flex 容器 */
}

.left {
  width: 200px; /* 左边固定宽度 */
  background-color: lightblue;
}

.right {
  flex: 1; /* 右边自适应宽度 */
  background-color: lightcoral;
}

2. 使用 Grid 布局

实现原理

• 将父容器设置为 Grid 容器。
• 使用 grid-template-columns 定义列宽，左边固定宽度，右边设置为 1fr 以自适应剩余空间。

代码示例

<div class="container">
  <div class="left">左边固定宽度</div>
  <div class="right">右边自适应宽度</div>
</div>

.container {
  display: grid;
  grid-template-columns: 200px 1fr; /* 左边固定宽度，右边自适应 */
}

.left {
  background-color: lightblue;
}

.right {
  background-color: lightcoral;
}

3. 使用浮动（Float）布局

实现原理

• 左边使用 float: left，并设置固定宽度。
• 右边使用 margin-left 避免与左边重叠。

代码示例

<div class="container">
  <div class="left">左边固定宽度</div>
  <div class="right">右边自适应宽度</div>
</div>

.left {
  float: left; /* 左边浮动 */
  width: 200px; /* 左边固定宽度 */
  background-color: lightblue;
}

.right {
  margin-left: 200px; /* 避免与左边重叠 */
  background-color: lightcoral;
}

4. 使用绝对定位（Absolute Positioning）

实现原理

• 左边使用 position: absolute，并设置固定宽度。
• 右边使用 margin-left 避免与左边重叠。

代码示例

<div class="container">
  <div class="left">左边固定宽度</div>
  <div class="right">右边自适应宽度</div>
</div>

.container {
  position: relative; /* 父容器设置为相对定位 */
}

.left {
  position: absolute; /* 左边绝对定位 */
  width: 200px; /* 左边固定宽度 */
  background-color: lightblue;
}

.right {
  margin-left: 200px; /* 避免与左边重叠 */
  background-color: lightcoral;
}

5. 使用表格布局（Table Layout）

实现原理

• 将父容器设置为 display: table。
• 左边和右边设置为 display: table-cell，左边固定宽度，右边自适应。

代码示例

<div class="container">
  <div class="left">左边固定宽度</div>
  <div class="right">右边自适应宽度</div>
</div>

.container {
  display: table; /* 父容器设置为表格布局 */
  width: 100%; /* 宽度占满父容器 */
}

.left {
  display: table-cell; /* 左边设置为表格单元格 */
  width: 200px; /* 左边固定宽度 */
  background-color: lightblue;
}

.right {
  display: table-cell; /* 右边设置为表格单元格 */
  background-color: lightcoral;
}

总结

方法	优点	缺点
Flexbox	简单、灵活，适合现代浏览器	兼容性稍差（IE 10+）
Grid	强大，适合复杂布局	兼容性稍差（IE 10+）
Float	兼容性好，适合旧版浏览器	需要清除浮动，布局不够灵活
绝对定位	简单，兼容性好	脱离文档流，可能影响其他元素布局
表格布局	兼容性好，适合旧版浏览器	语义化差，不适合复杂布局

推荐使用 Flexbox 或 Grid，因为它们简单、灵活且适合现代浏览器。如果需要兼容旧版浏览器，可以选择 Float 或 表格布局。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github