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

Author Avatar
hayato 11月 09, 2017

布局条件

高度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大法好 ^_^

作者：hayato
文章版权：本站所有文章版权依赖于 CC BY-NC-SA 3.0 Unported License
本文链接：https://blog.axis-studio.org/2017/11/09/实现前端三栏布局的几种方法/