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

看到百度前端技术学院(IFE)某些大神的笔记,很有感触,下面给大家分享一下:

NO.1 创建BFC,利用BFC不和浮动元素重叠的特性

HTML核心部分

  • 三栏的顺序分别为左-右-中
  • 左右两栏分别设置宽度以及左浮动和右浮动,脱离普通流,这时如果让中间栏高度大于2个边栏会发现两边栏实际上
  • 是叠在main上面的,因为main是块状元素,独占一行,浮动元素向相应的方法浮动,直到遇到容器的边框中间
  • 栏设置overflow:hidden创建BFC,这样就可以利用BFC不和浮动元素重叠的特性,让main的宽度自适应
  • 具体有关BFC的内容可以参考下面的链接
    <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*/
    }
    

在线demo 参考资料:关于Block Formatting Context

NO.2 圣杯布局

HTML核心部分

  • 三栏的顺序为中-左-右,并包裹在warp容器内
  • 三栏同时设置float:left,左右两栏定宽、中间宽度100%
  • 利用负边距分别把left和right,这时视觉上left和right是叠在main上面的
  • 设置warp的左右padding分别为左右栏的宽度
  • 利用相对定位让left和right回到合适的位置
    <div class="warp">
      <div class="main">中间自适应</div>
      <div class="left">左边定宽</div>
      <div class="right">右边定宽</div>
    </div>
    
    CSS核心部分
  • left与main之间的20px间隔,可以利用相对定位时多加20个像素实现,同时warp设置padding的时候把这20px加进去
  • left与warp之间的20间隔,直接加20px的padding-left到warp上
    .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;
    }
    

在线demo 参考资料:

NO.3 双飞翼布局

  • 双飞翼布局跟圣杯很像,区别在于圣杯利用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;
}

在线demo

NO.4 flex布局

HTML核心部分

  • 三栏的顺序为左-中-右,并包裹在warp容器内
  • warp设置display: flex,如果三栏高度自适应又希望顶部对齐,需要添加align-items: flex-start
  • 左右栏各自设置定宽
<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;
}

在线demo 参考资料:

关于兼容性

  • 前三种方法支持IE8及以上浏览器和各种现代浏览器,demo里用了1个css3伪元素last-child,所以在IE8下面右边栏最后一个logo会有问题
  • flex布局部分支持IE10+和现代浏览器,具体参见CAN I USE

关于浮动清除

关于浮动清除,推荐几个资料

目前最优雅的打开清除浮动方式应该是这样的(具体理由参考上面第二篇)

.clearfix:after {
    content:" ";
    display:block;
    clear:both;
}
标签:   |  
时间: 2016年03月18日上午9:45  |  
作者:
LEAVE A REPLY
loading
正在赶回来……