圣杯/双飞翼布局与负边距

    0

左右定宽,中间自适应,利用负边距来改变文档流

左右定宽,中间自适应

圣杯布局

html
<div class="content"> <div class="middle"></div> <div class="left"></div> <div class="right"></div> </div>
css
.content { overflow: hidden; padding: 0 100px; } .middle { position: relative; width: 100%; float: left; height: 80px; background: #f00; } .left { position: relative; width: 100px; float: left; left: -100px; height: 80px; margin-left: -100%; background: #0f0; } .right { position: relative; width: 100px; float: left; right: -100px; height: 80px; margin-left: -100px; background: #00f; }

双飞翼布局

html
<div class="content"> <div class="middle"> <div class="inner-middle"></div> </div> <div class="left"></div> <div class="right"></div> </div>
css
.content { overflow: hidden; } .middle { width: 100%; float: left; } .inner-middle{ width:100%; height: 80px; background: green; } .left { width: 100px; float: left; height: 80px; margin-left: -100%; background: yellow; } .right { width: 100px; float: left; height: 80px; margin-left: -100px; background: pink }
评论区

共有评论 0

暂无评论