实现前端三栏布局的五种方法

布局条件

高度100px,左右布局宽各300px,中间高度自适应。

第一种浮动布局

代码

在线地址点我

<div class="container">
  <div class="left">
    <h1>这是浮动布局的左部</h1>
  </div>
  <div class="right">
    <h1>这是浮动布局的右部</h1>
  </div>
  <div class="center">
    <h1>这是浮动布局的中部</h1>
  </div>
</div>
html,body
  margin 0
  padding 0
 .left
   float left
   height 100px
   width 300px
   background red
 .center
   height 100px
   background yellow
 .right
   float right
   height 100px
   width 300px
   background blue

注意点

需要注意的是左右浮动的div必须写在中间div的前面。这样写的原理是把两个浮动div浮动在左右两侧,脱离文档流,再写中间的div,此时中间的div的左右两边会被左右浮动的div遮罩,这样就造成了三栏布局的样式。

优缺点

优点: 兼容性好,点我查看兼容性

These properties are supported in effectively all browsers (since IE6+, Firefox 2+, Chrome 1+ etc).

缺点:

  • 需要确保浮动元素与中间元素的高度保持一致,当中间元素被过于撑开时,会造成底部溢出。

第二种绝对定位布局

代码

在线地址点我

<div class="container">
  <div class="left">
    <h1>左边部分</h1>
  </div>
  <div class="center">
    <h1>中间部分</h1>
  </div>
  <div class="right">
    <h1>右边部分</h1>
  </div>
</div>
html,body
  margin 0
  padding 0
  .left
    position absolute
    left 0
    width 300px
    height 100px
    background red
  .center
    position absolute
    left 300px
    right 300px
    height 100px
    background yellow
  .right
    position absolute
    right 0
    height 100px
    width 300px
    background blue

另一种写法

在线地址点我

<div class="left">
   <h1>左边部分</h1>
</div>
<div class="right">
   <h1>右边部分</h1>
</div>
<div class="center">
   <h1>中间部分</h1>
</div>
html,body
  margin 0
  padding 0
  .left
    position absolute
    height 100px
    width 300px
    background red
   .center
     height 100px
     margin 0 300px
     background yellow
   .right
     position absolute
     right 0
     height 100px
     width 300px
     background blue

注意点

简单测试了一下,centerdiv也需要放在最后,否则右边的div会被挤到下一行右侧。

优缺点

优点:同样的兼容性OK。

缺点:使用absolute会造成页面元素脱离文档流,对其他元素的定位会有一定的影响。其他元素基本也需要脱离文档流来布局。

第三种表格布局

代码

在线地址点我

<div class="container">
  <div class="left">
    <h1>我是左边</h1>
  </div>
  <div class="center">
    <h1>我是中间</h1>
  </div>
  <div class="right">
    <h1>我是右边</h1>
  </div>
</div>
html,body
  margin 0
  padding 0
  .container
    display table
    width 100%
  .container
    > div
      display table-cell
      height 100px
    .left
      width 300px
      background red
    .center
      background yellow
    .right
      width 300px
      background blue

优缺点

优点:方便实现,兼容性好。

缺点:可能大家不是很喜欢。

第四种flex布局

代码

在线地址点我

<div class="container">
  <div class="left">
    <h1>我是左边</h1>
  </div>
  <div class="center">
    <h1>我是中间</h1>
  </div>
  <div class="right">
    <h1>我是右边</h1>
  </div>
</div>
html,body
  margin 0
  padding 0
  .container
    display flex
    height 100px
    .left
      width 300px
      background red
     .center
       flex 1
       background yellow
     .right
       width 300px
       background blue

优缺点

优点:方便,布局首选。

第五种grid网格布局

代码

在线地址点我

<div class="container">
  <div class="left">
    <h1>我是左边</h1>
  </div>
  <div class="center">
    <h1>我是中间</h1>
  </div>
  <div class="right">
    <h1>我是右边</h1>
  </div>
</div>
html,body
  margin 0
  padding 0
  .container
    display grid
    grid-template-columns 300px auto 300px
    grid-template-rows 100px
    .left
      background red
    .center
      background yellow
    .right
      background blue

优缺点

优点:是CSS布局的标准,以后就用它了。

缺点:目前可能有点兼容性问题,点我查看兼容性。

总结

flex+grid大法好 ^_^