如何实现双飞翼布局

76 阅读1分钟

什么是双飞翼布局

左右宽度固定,中间宽度自适应,中间的内容优先加载

圣杯布局

左右宽度固定,中间宽度自适应

演示代码

@说人话的前端 - 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>