如何实现圣杯布局

什么是圣杯布局

两边固定宽度，中间自适应宽度

难点

• margin-left:-100%; 100% 是父级宽度的100%

• margin-right:150px; 其他元素当他宽度少了150px

演示代码

@说人话的前端 - bilibili * { margin: 0; padding: 0; } .container { overflow: hidden; padding-left: 200px; padding-right: 150px; background-color: #ccc; } .item { float: left; color: #fff; font-size: 20px; } .content { width: 100%; height: 200px; background-color: green; } .left-item { width: 200px; margin-left: -100%; position: relative; right: 200px; background-color: red; } .right-item { width: 150px; margin-right: -150px; background-color: blue; }