css页面中常见左中右分栏布局的两种实现方式

下面是CSS页面中常见左中右分栏布局的两种实现方式的完整攻略：

方式一：使用浮动属性

这是一种比较传统和常见的实现方式，具体步骤如下：

1. 设置HTML结构，包含左侧、中间和右侧三个区域，例如：

<div class="container">
  <div class="left"><!-- 左侧内容 --></div>
  <div class="center"><!-- 中间内容 --></div>
  <div class="right"><!-- 右侧内容 --></div>
</div>

1. 为左侧和右侧两个区域添加浮动属性，用于实现悬浮效果，例如：

.left {
  float: left;
  width: 200px;
}

.right {
  float: right;
  width: 200px;
}

1. 为中间区域设置外边距（margin）值，比左右两侧的宽度总和还要宽，例如：

.center {
  margin: 0 220px;
}

注意，这里的外边距值必须大于左右两侧的宽度总和，才能实现使得中间区域占据整个剩余的页面宽度。

示例代码：

<div class="container">
  <div class="left">左侧内容</div>
  <div class="center">中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容</div>
  <div class="right">右侧内容</div>
</div>

.container {
  border: 1px solid #ccc;
  overflow: hidden;
}

.left {
  float: left;
  width: 200px;
  background-color: #f5f5f5;
  padding: 10px;
  box-sizing: border-box;
}

.center {
  margin: 0 220px;
  background-color: #fff;
  padding: 10px;
}

.right {
  float: right;
  width: 200px;
  background-color: #f5f5f5;
  padding: 10px;
  box-sizing: border-box;
}

方式二：使用 Flex 布局

这是一种比较新的实现方式，使用 Flex 布局可以更方便地控制布局，具体步骤如下：

1. 设置HTML结构，同样包含左侧、中间和右侧三个区域，例如：

<div class="container">
  <div class="left">左侧内容</div>
  <div class="center">中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容</div>
  <div class="right">右侧内容</div>
</div>

1. 使用 Flex 属性将父容器的布局变为一排，并允许它们的子项可以伸展：

.container {
  display: flex;
  justify-content: space-between;
}

1. 给左侧和右侧两个容器定义一个宽度：

.left,
.right {
  width: 200px;
}

示例代码：

<div class="container">
  <div class="left">左侧内容</div>
  <div class="center">中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容</div>
  <div class="right">右侧内容</div>
</div>

.container {
  border: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.left,
.right {
  width: 200px;
  background-color: #f5f5f5;
  padding: 10px;
  box-sizing: border-box;
}

.center {
  flex: auto;
  background-color: #fff;
  padding: 10px;
}

以上就是常见的左中右分栏布局的两种实现方式的攻略了。