CSS三列布局的多种表现形式

让我们来讲解一下"CSS三列布局的多种表现形式"。

什么是CSS三列布局？

CSS三列布局就是指将一个网页分成三个部分展示内容，通常是左侧栏、右侧栏和中间主体内容。

多种表现形式

1. 使用浮动

<div class="container">
  <div class="left">左侧栏</div>
  <div class="right">右侧栏</div>
  <div class="main">主体内容</div>
</div>

.container {
  /* 清除浮动 */
  overflow: hidden;
}

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

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

.main {
  margin: 0 200px;
}

说明：

• .left 和 .right 两个侧边栏使用了 float 属性浮动，左侧使用了 float: left，右侧使用了 float: right；
• .main 主体内容使用了 margin 属性来避免被侧边栏遮盖，margin-right 的值等于右侧栏的宽度，margin-left 的值等于左侧栏的宽度。
• 父元素 .container 使用了 overflow: hidden 来清除浮动影响。

2. 使用绝对定位

<div class="container">
  <div class="left">左侧栏</div>
  <div class="main">主体内容</div>
  <div class="right">右侧栏</div>
</div>

.container {
  position: relative;
}

.left {
  width: 200px;
  position: absolute;
  left: 0;
  top: 0;
}

.right {
  width: 200px;
  position: absolute;
  right: 0;
  top: 0;
}

.main {
  margin: 0 200px;
}

说明：

• .left 使用 position: absolute 和 left: 0 将左侧栏固定在左边，top: 0 则将其置于最上面；
• .right 使用 position: absolute 和 right: 0 将右侧栏固定在右边，top: 0 则将其置于最上面；
• .main 与第一种布局方式相同，margin-right 的值等于右侧栏的宽度，margin-left 的值等于左侧栏的宽度；
• 父元素 .container 使用了 position: relative 来为子元素提供参考对象。

总结

以上是CSS三列布局的两种表现形式，除此之外还有很多其他方式来实现三列布局。学会一种方法并不一定就能应对所有的场景，因此在实践中需要灵活运用，选择最适合当前需求的布局方式。