几种实现左右定宽中间自适应三栏布局的方法

几种实现左右定宽中间自适应三栏布局的方法

 2016-03-18 08:35    网页设计   标签：代码 活动   1300    2

最近一直在参加百度前端技术学院的学习，在任务三中，按作业的要求，需要制作一个左右定宽中间自适应的三栏布局，如图。看了下几位高手的总结，感觉很不错，特此分享下。

NO.1 利用 overflow: hidden; 的特性：

三栏的顺序分别为左-右-中。

左右两栏分别设置宽度以及左浮动和右浮动，脱离普通流，这时如果让中间栏高度大于2个边栏会发现两边栏实际上是叠在 main 上面的，因为 main 是块状元素，独占一行，浮动元素向相应的方法浮动，直到遇到容器的边框。

中间栏设置 overflow：hidden 创建BFC，这样就可以利用BFC不和浮动元素重叠的特性，让 main 的宽度自适应。

<!--Html部分--->
<div class="left">左边定宽</div>
<div class="right">右边定宽</div>
<div class="main">中间自适应</div>
<!--CSS部分--->
.left {
  float: left;
  width: 200px
}
.right {
  float: right;
  width: 120px
}
.main {
  overflow: hidden; /*创建BFC*/
}

参考资料：关于Block Formatting Context

NO.2 内空Padding圣杯模式：

三栏的顺序为中-左-右，并包裹在warp容器内。

三栏同时设置float:left，左右两栏定宽、中间宽度100%。

利用负边距分别把left和right，这时视觉上left和right是叠在main上面的。

设置warp的左右padding分别为左右栏的宽度。

<!--Html部分--->
<div class="warp">
  <div class="main">中间自适应</div>
  <div class="left">左边定宽</div>
  <div class="right">右边定宽</div>
</div>
<!--CSS部分--->
.main {
width:100%;
float:left;
background-color: red;
height:300px;
}
.left {
float: left;
background-color: blue;
height: 200px;
width: 200px;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
float: left;
background-color: yellow;
height: 400px;
width: 120px;
margin-left: -120px;
position: relative;
right: -120px;
}
.warp {
padding: 0 120px 0 200px;
}

left与main之间的20px间隔，可以利用相对定位时多加20个像素实现，同时warp设置padding的时候把这20px加进去。

left与warp之间的20间隔，直接加20px的padding-left到warp上。

参考资料：

• 双飞翼布局介绍

• CSS布局 -- 圣杯布局 & 双飞翼布局

• CSS布局奇淫巧计之-强大的负边距

NO.3 外框子 Margin 双飞翼模式：

双飞翼布局跟圣杯很像，区别在于圣杯利用padding控制main的位置，双飞翼用margin控制main的位置。

需要额外在main里面加一层div，用于margin控制，但是可以免去左右两栏的相对定位。

<!--Html部分--->
<div class="main">
    <div class="main-warp"> 
        中间自适应
     </div>
</div>
<div class="left">左边定宽</div>
<div class="right">右边定宽</div>
<!--CSS部分--->
.main {
  width:100%;
  float:left;
}
/*在双飞翼布局里，中间栏的边框、背景色要在`main-warp`里设置*/
.main-warp {
  background-color: red;
  height:300px;
  margin: 0 120px 0 200px; /*设置main的位置*/
}
.left {
  float: left;
  background-color: blue;
  height: 200px;
  width: 200px;
  margin-left: -100%;
}
.right {
  float: left;
  background-color: yellow;
  height: 400px;
  width: 120px;
  margin-left: -120px;
}

NO.4 flex布局：

三栏的顺序为左-中-右，并包裹在warp容器内。

warp设置display: flex，如果三栏高度自适应又希望顶部对齐，需要添加align-items: flex-start。

左右栏各自设置定宽：

<!--Html部分--->
<div class="warp">
    <div class="left">左边定宽</div>
    <div class="main">中间自适应</div>
    <div class="right">右边定宽</div>
</div>
<!--CSS部分--->
.main {
  flex: 1;
  background-color: red;
  height:300px; 
}
.left {
  background-color: blue;
  height: 200px;
  width: 200px;
}
.right {
  background-color: yellow;
  height: 400px;
  width: 120px;
}
.warp {
  display: flex;
}

参考资料：

• css3 flex流动自适应响应式布局实例

• flexbox

关于兼容性：

前三种方法支持IE8及以上浏览器和各种现代浏览器，demo里用了1个css3伪元素last-child，所以在IE8下面右边栏最后一个logo会有问题。

flex布局部分支持IE10+和现代浏览器，具体参见CAN I USE。

关于浮动清除：

目前看到最好的代码如下：

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

参考资料：The very latest clearfix reloaded