[分享]css三栏自适应布局

CSS三栏自适应布局是一种常用的页面布局方式。它可以将页面分为左、中、右三栏，其中中间一栏宽度固定，左右两栏宽度自适应，随着浏览器窗口大小变化而自动调整。实现起来也不难，下面我们来学习一下具体的实现方...

CSS三栏自适应布局是一种常用的页面布局方式。它可以将页面分为左、中、右三栏，其中中间一栏宽度固定，左右两栏宽度自适应，随着浏览器窗口大小变化而自动调整。实现起来也不难，下面我们来学习一下具体的实现方法。

<div id="container">
  <div class="left">左边内容</div>
  <div class="middle">中间内容</div>
  <div class="right">右边内容</div>
</div>

#container {
  width: 100%;
}

.left {
  float: left;
  width: 20%;
}

.middle {
  float: left;
  width: 60%;
}

.right {
  float: left;
  width: 20%;
}

上面的代码中，我们先定义了一个id为container的div作为容器，里面包含左、中、右三个子元素。然后通过CSS设置左侧和右侧的宽度为20%，中间部分的宽度为60%，再将三个元素都使用float属性向左浮动。这样，当页面宽度变化时，中间部分的宽度保持不变，左右两侧的宽度则根据剩余空间自适应调整。

需要注意的是，这种布局方式需要保证container的宽度为100%，否则当浏览器窗口变小时，容器也会跟着缩小，而三栏布局则会错位。同时，如果左右两侧的内容高度超过中间部分，会导致布局出现问题，解决方法可以设置container的高度为左右两侧内容的高度较大者，或者使用clearfix清除浮动。

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

上面的代码定义了一个clearfix类，通过after伪元素清除浮动。在容器的末尾添加一个带有clearfix类的空元素，就可以自动清除浮动，避免出现布局问题了。