CSS 两边固定中间自适应布局

CSS 两边固定中间自适应布局

中间 float BFC 布局

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center">
        <h1>浮动布局</h1>
    </div>
</div>
.container > div{
    height: 200px;
}

.left {
    float: left;
    width: 300px;
    background: red;
}

.right {
    float: right;
    width: 300px;
    background: blue;
}

.center {
    overflow: hidden;
    background: yellow;
}

缺点:中间浮动布局的内容最后才加载

圣杯布局

  • 父元素:需要内边距
  • 三个孩子全部是:float: left
  • 左右分别是相对布局
<div class="container">
    <div class="center">
        <h1>圣杯布局</h1>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</div>
.container {
    padding: 0 300px;
}

.container > div {
    height: 200px;
}

.center {
    float: left;
    width: 100%;
    background: yellow;
}

.left {
    float: left;
    width: 300px;
    background: red;
    margin-left: -100%;
    position: relative;
    left: -300px;
}

.right {
    float: left;
    width: 300px;
    background: blue;
    margin-left: -300px;
    position: relative;
    right: -300px;
}

双飞翼布局

<div class="container">
   <div class="center-container">
       <div class="center">
           <h1>双飞翼布局</h1>
       </div>
   </div>
   <div class="left"></div>
   <div class="right"></div>
</div>
.container div {
   height: 200px;
}

.center-container {
   float: left;
   width: 100%;
   height: 100px;
   background: yellow;
}

.center {
   margin: 0 300px;
}

.left {
   background: red;
   float: left;
   width: 300px;
   margin-left: -100%;
}

.right {
   background: blue;
   float: left;
   width: 300px;
   margin-left: -300px;
}

flex

<div class="container">
   <div class="left"></div>
   <div class="center">
       <h1>flexbox</h1>
   </div>
   <div class="right"></div>
</div>
.container {
   display: flex;
}

.container > div {
   height: 200px;
}

.left {
   width: 300px;
   background: red;
}

.center {
   flex: 1;
   background: yellow;
}

.right {
   width: 300px;
   background: blue;
}

table

<div class="container">
   <div class="left"></div>
   <div class="center">
       <h1>表格布局</h1>
   </div>
   <div class="right"></div>
</div>
.container {
   width: 100%;
   display: table;
   height: 200px;
}

.container > div {
   display: table-cell;
}

.left {
   width: 300px;
   background: red;
}

.center {
   background: yellow;
}

.right {
   width: 300px;
   background: blue;
}

绝对定位

<div class="container">
   <div class="left"></div>
   <div class="center">
       <h1>绝对定位布局</h1>
   </div>
   <div class="right"></div>
</div>
.container > div {
   position: absolute;
   height: 200px;
}

.left {
   left: 0;
   width: 300px;
   background: red;
}

.center {
   left: 300px;
   right: 300px;
   background: yellow;
}

.right {
   right: 0;
   width: 300px;
   background: blue;
}

Grid

<div class="container">
   <div class="left"></div>
   <div class="center">
       <h1>网格布局</h1>
   </div>
   <div class="right"></div>
</div>
.container {
   display: grid;
   width: 100%;
   grid-template-rows: 200px;
   grid-template-columns: 300px auto 300px;
}

.left {
   background: red;
}

.center {
   background: yellow;
}

.right {
   background: blue;
}

选哪个

  • 浮动布局:middle 最后才能加载出来
  • 圣杯:先加载 middle,但是响应效果差
  • 双飞翼:比圣杯简洁、影响性好。

圣杯布局和双飞翼布局都是在浮动布局时代的比较经典的布局方式,对旧的浏览器有很好的兼容性。不过事实上,现代浏览器已经大量普及,需要适配旧浏览器的场景已经开始变少,加上移动端开发越来越盛行,于是有了比较新的布局方式。

  • flex:自适应布局最佳方案
  • table:缺点不灵活
  • 绝对定位:脱离文档流、可维护性差
  • Grid:浏览器兼容性

参考