什么是双飞翼布局
左右宽度固定,中间宽度自适应,中间的内容优先加载
圣杯布局
左右宽度固定,中间宽度自适应
演示代码
@说人话的前端 - bilibili * { margin: 0; padding: 0; } .item { float: left; color: #fff; font-size: 20px; } .container { width: 100%; background-color: #ccc; } .content { margin-left: 200px; margin-right: 150px; height: 200px; background-color: green; } .left-item { width: 200px; margin-left: -100%; background-color: red; } .right-item { width: 150px; margin-left: -150px; background-color: blue; }@说人话的前端-bilibili
<div class="left-item item">left-item</div>
<div class="right-item item">right-item</div>