第19题 CSS如何实现双飞翼布局?
双飞翼布局如下图所示:
有了圣杯布局的铺垫,双飞翼布局也就问题不大啦。这里采用经典的 float 布局来完成。
HTML 代码:
<article class="container"> <div class="center"> <div class="inner">双飞翼布局</div> </div> <div class="left">码云笔记</div> <div class="right">mybj123.com</div> </article>
CSS 代码:
*{ margin: 0; padding: 0; } .container { min-width: 600px; } .left { float: left; width: 200px; height: 400px; background: red; margin-left: -100%; } .center { float: left; width: 100%; height: 500px; background: yellow; } .center .inner { margin: 0 200px; } .right { float: left; width: 200px; height: 400px; background: blue; margin-left: -200px; }
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 第19题 CSS如何实现双飞翼布局?
码云笔记 » 第19题 CSS如何实现双飞翼布局?