每天一个小知识--实现圣杯布局（双飞翼布局）的几种方式实现圣杯布局（双飞翼布局）的几种方式圣杯布局：左右两边盒子的宽度

实现圣杯布局（双飞翼布局）的几种方式圣杯布局：左右两边盒子的宽度固定不会随着屏幕大小的改变而改变，中间盒子宽度自适应

1.使用定位的方式让左右两边的盒子绝对定位，左边盒子left:0,右边盒子：right:0,绝对定位盒子不占位置，中间的盒子padding左右宽度为左右两边盒子的宽度保留左右盒子的位置

Document * { margin: 0; padding: 0; } .box { position: relative; } .center { height: 300px; padding: 0 200px; background-color: #0a0; } .left, .right { position: absolute; top: 0; width: 200px; height: 300px; background-color: #6cf; } .left { left: 0; } .right { right: 0; } </style>

<div class="box">
    <div class="left"></div>
    <div class="center">
    内容部分
    </div>

    <div class="right"></div>
</div>

2.使用浮动加calc计算属性让所有盒子左浮动，左右两边的盒子宽度固定，中间盒子的宽度通过calc计算属性动态计算得出即中间盒子的宽度为100%减去左右两边的盒子总宽度

Document * { margin: 0; padding: 0; } .left, .right { float: left; width: 200px; height: 300px; background-color: #6cf; } .center { float: left; width: calc(100% - 400px); height: 300px; background-color: #0a0; } </style>

内容部分

3.使用flex布局（推荐）通过父元素设置flex布局，让盒子在一行显示，左右两边的盒子固定宽度，而父元素的剩余宽度则为中间盒子的宽度flex:1

Document * { margin: 0; padding: 0; } .box { display: flex; } .left, .right { width: 200px; height: 300px; background-color: #6cf; } .center { flex: 1; background-color: #0a0; } </style>

内容部分