使用CSS实现三列布局（左右固定宽度，中间自适应）六种方法 CSS

1、利用左右浮动，脱离文档流，中间元素正常，设置左右margin。元素顺序:left 、 right 、middle(middle要放在最后)
如果窗口太小，右边元素会被挤到下一行

.box{ height: 200px; padding: 0 200px 0 100px; } .left{ width: 100px; float: left; margin-left: -100px; background: red; } .right{ width: 200px; float: right; margin-right: -200px; background: green; } .middle{ width: 100%; float: right; background: blue; }左右中间

2、圣杯布局(注意：标签顺序：自适应的放前面，固定的放后面)

.box{ height: 200px; padding: 0 200px 0 100px; } .left{ width: 100px; float: left; margin-left: -100%; position: relative; left: -100px; background: red; } .right{ width: 200px; float: left; margin-left: -200px; position: relative; right: -200px; background: green; } .middle{ width: 100%; float: left; background: blue; }中间左右

3、双飞翼布局（与圣杯布局的区别：自适应部分content又被包裹了一次，样式也从最外层box中的padding变成content中的margin，注意：中间的自适应会占左右位置）

.box{ height: 200px; } .left{ width: 100px; float: left; margin-left: -100%; background: red; } .right{ width: 200px; float: left; margin-left: -200px; background: green; } .middle{ width: 100%; float: left; background: blue; } .content{ margin: 0 200px 0 100px; }中间左右

【使用CSS实现三列布局（左右固定宽度，中间自适应）六种方法】

文章图片

4、利用绝对定位

.box{ height: 200px; width: 100%; position: relative; } .left{ width: 100px; position: absolute; top: 0px; left: 0px; background: red; } .right{ width: 200px; position: absolute; top: 0px; right: 0px; background: green; } .middle{ margin: 0 200px 0 100px; background: blue; }左右中间

5、使用flex布局（ flex 是 flex-grow、flex-shrink、flex-basis的缩写 flex:1 等同于flex-grow: 1; flex-shrink: 1; flex-basis: 0%; ）

.box{ display: flex; flex-direction: row; } .left{ width: 100px; background: red; } .right{ width: 200px; background: green; } .middle{ background: blue; flex: 1; }左中间右

6、利用calc()动态计算中间的值

.box{ height: 200px; } .left{ width: 100px; float: left; background: red; } .right{ width: 200px; float: left; background: green; } .middle{ width: calc(100% - 300px); float: left; background: blue; }左中间右