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

 2016-03-18 08:35

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

左右定宽中间自适应的三栏布局

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%。

利用负边距分别把leftright,这时视觉上leftright是叠在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;
}

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

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

参考资料:


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;
}

参考资料:


关于兼容性:

前三种方法支持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

作者头像

作者:摘录

文章来自网络!欢迎大家来稿

 发表评论:

 评论列表

themebetter 2016-03-19  15:55

我们网站的博客导航已添加了贵站,欢迎去看看

紫铜炉 2016-03-19  17:36

什么网站,网址多少????抱歉我没把网站放出来