Layout 不可思议（二）—— 两侧定宽的三列布局

三列布局作为网页设计中最常见的布局，其实现方法早已被诸位前端大神摸透

网上相关的文章很多，原本已无必要再做赘述

不过既然开了 Layout 系列，三列布局就是必修课

本文整理了一些常用的实现方法，然后加入了一些个人愚见，希望能给诸位看官一些新的启发

 

效果图：

 

 

一、绝对定位

最容易理解的一种方法，以中间内容为主体，通过 margin 或者 padding 将两侧撑开，最后用 absolute 定位两侧

 

HTML 结构：

<div class="container">
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
</div>

CSS 样式：

.container {
  position: relative;
}
.left,
.right {
  position: absolute;
  top: 0;
  width: 200px;
}
.left {
  left: 0;
}
.right {
  right: 0px;
}
.main {
  margin: 0 200px;
}

 

 

二、负值 margin

绝对定位方案的变种，利用 margin 可以设置负值的特性，模拟出类似于定位的效果，应用最广的方案

 

HTML 结构：

<div class="container">
    <div class="left"></div>
    <div class="main-wrap">
          <div class="main"></div>
    </div>
    <div class="right"></div>
</div>

CSS 样式：

.container {
  overflow: hidden;
}
.left, 
.right {
  float: left;
  width: 200px;
}
.main-wrap {
  float: left; 
  width: 100%; 
  margin: 0 -200px;
}
.main {
  margin: 0 200px;
}

这种方案的重点在于，中间列 main 一定要用双层标签，外层为容器，内层才是主体内容

三列都设置了浮动 float，可以用 display: inline-block 替换

 

关于这种方案还有一种变式：

将中间列的 html 部分挪到最前，然后 left 容器设置 margin-left: -100%

这种方案也能实现同样的效果，但由于 html 结构的顺序发生了改变，所以我更推荐使用原始方案

 

 

三、左右浮动

流式布局，分别设置左列 float:left 和右列 float:right，然后让中间列“流”入两列之间

 

HTML 结构：

<div class="left"></div>
<div class="right"></div>
<div class="main"></div>

CSS 样式：

.container {
  overflow: hidden;
}
.left, 
.right {
  width: 200px;
}
.main {
  width: auto;
  margin: 0 200px
}
.left {
  float: left;
}
.right {
  float: right;
}

因为使用了左右浮动，所以不能用 display:inline-block 替换，而且中间列必须放到最后

 

 

四、Flex 布局

最简单省事儿但兼容性最差的方案，可以用在移动端 如果移动端也要做三列布局的话

 

HTML 结构：

<div class="container">
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
</div>

CSS 样式：

.container {
  display: flex;
}
.left, .right {
  width: 200px;
}
.main {
  display: flex;
  flex: auto;
}