网页布局之三栏网页宽度自适应布局

在工作中经常遇到网页布局错乱的问题，往往引发的这种问题都是因为不同设备不同分辨率而导致。归根结底，是因为前端工程师经验不足，代码写得不够完好。以下是我总结及从网络搜集的一些网页布局的方法，供大家参考学习。

网页布局中经常用到的是三栏布局且要求一栏宽度自适应。无论在自适应网页或响应式网页中，三栏布局都是最为常见和基础的布局方式之一所谓“三栏布局”，就是在网页上以平铺方式展现的左中右三列布局，其特点在于，左右两列可固定在网页左右两侧，中间一列永远居中，且当网页宽度大于左右两列宽度之和时，中间一列可随网页整体宽度的变化而变化。

目前为止，三栏布局的常用写法有三个：绝对定位法，外距负值法及自身浮动法。

绝对定位法
左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。

首先需要三个div，将左右两边的div的position设置为absolute，左右设置为相等固定宽度（左右两栏宽度可根据实际需要而设置，然后再去调整中间主体栏对应的左右margin值即可），在这里设置为200px，并且左边div的top值为0，left值为0，同理右边top值为0，right值为0。然后设置中间div的样式，将中间div的margin-left和margin-right设置为左右两边的固定宽200px。以下是HTML布局代码及CSS代码

<body>
    <div id="main"></div>
    <div id="left"></div>
    <div id="right"></div>
</body>

#main {
  margin:0 200px;
  background:red;
}  
#left{
  position:absolute;
  top:0;left:0;
  width:200px;
  background:blue;
  height:100%;
}    
#right{  
  position:absolute;
  top:0;
  right:0;
  width:200px;
  background:green;
  height:100%;
}

这种方式三个div的顺序可以任意改变。

此方法的优点在于：理解容易，上手简单，受内部元素影响而破坏布局的概率低，就是比较经得起折腾。

缺点在于：如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生重叠的情况。

自身浮动法
左栏左浮动，右栏右浮动，中间栏放最后

不多说，直接上代码

<body>
  <div id="left"></div>
  <div id="right"></div>
  <div id="main"></div>
</body>

#main {
  margin:0 200px;
  background:red;
}
#left{
  float:left;
  width:200px;
  background:blue;
  height:100%;
}
#right{
  float:right;
  width:200px;
  background:green;
  height:100%;
}

这种方式需要注意三个div的顺序，左右两栏的顺序不分先后，但是中间一栏必须放在最后。

此方法的优点是：代码足够简洁与高效

缺点是：中间主体存在克星，clear:both属性。如果要使用此方法，需避免明显的clear样式。

margin负值法
左右两栏均左浮动，左右两栏采用负的margin值。中间栏被宽度为100%的浮动元素包起来。

下面是布局代码

<body>
  <div id="main">
    <div class="content"></div>
  </div>
  <div id="left"></div>
  <div id="right"></div>
</body>

#main {
  float:left;
  width:100%;
}
.content {
  margin:0 200px;
  height:100%;
  background:red;
}
#left{
  float:left;
  width:200px;
  margin-left:-100%;
  background:blue;
}
#right{
  float:left;
  width:200px;
  margin-left:-200px;
  background:green;
}

左右两栏div的顺序不分先后，但是主体部分div要放前面。

此方法的优点在于：三栏相互关联，可谓真正意义上的自适应，有一定的抗性——布局不易受内部影响。

缺点在于：相对比较难理解些，上手不容易，代码相对复杂。出现百分比宽度，过多的负值定位，如果出现布局的bug，排查不易。

原创文章，作者：ZERO，如若转载，请注明出处：https://www.edu24.cn/course/css/three-column-page-layout.html