今天聊聊一个经典的布局实例:
实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化
可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现。不过,还请容我在双飞翼之外,循序渐进地介绍一下我们可以如何实现一个三列布局。
See the Pen float-three-columns by xal821792703 ( @honoka ) on CodePen .
这是一种比较便利的实现方式,无需额外的元素辅助定位,同时兼容性也比较优秀。但有一个缺点就是该布局方式只能实现左右两列宽度固定,中间自适应这一种三列布局,灵活性不强。
See the Pen bfc-three-columns by xal821792703 ( @honoka ) on CodePen .
昨天的《 CSS 布局实例系列(二)如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局 》已经谈到了利用 BFC 原理实现多列布局的方法。BFC 元素不会与浮动元素叠加,自然也可以利用 BFC 原理完成这个实例。
See the Pen grid-three-columns by xal821792703 ( @honoka ) on CodePen .
双飞翼是由淘宝玉伯等前端大牛提出的一种多列布局方法,主要利用了浮动、负边距、相对定位三个布局属性,使三列布局就像小鸟一样,拥有中间的身体和两侧的翅膀。
接下来就简单介绍一下双飞翼的实现过程:
<div class="grid"> <div id="div-middle-02"><span>div-middle</span></div> <div id="div-left-02"><span>div-left</span></div> <div id="div-right-02"><span>div-right</span></div> </div>
#div-middle-02 { float: left; background-color: #fff9ca; width: 100%; height: 50px; }
中间元素直接占满全列,形成小鸟的身体。
#div-middle-02 { float: left; background-color: #fff9ca; width: 100%; height: 50px; } #div-left-02 { float: left; background-color: red; width: 150px; margin-left: -100%; height: 50px; } #div-right-02 { float: left; background-color: yellow; width: 200px; margin-left: -200px; height: 50px; }
看起来,双翼安装成功啦。
这样三列布局就大功告成了?No,no,no,仔细看看上面的效果图,可以发现 div-middle 的字块消失了。这是因为通过负边距调整浮动元素位置时,会产生层叠的效果,上面的布局其实只是左右两列元素分别定位在自己的位置上并覆盖中间元素的那部分而已,中间元素的定位并未成功。中间元素要怎样定位在自己的位置上呢?小鸟的身体不是还缺少骨架嘛,那么我们在小鸟体内加上骨架吧:
<div id="div-middle-02"> <div id="middle-wrap-02"><span>div-middle</span></div> </div>
在中间元素中再增加一层包裹,通过这层骨架我们就可以方便地控制小鸟身体的位置啦,方法就是调整骨架的左右边距,使其分别等于左右两列的宽度:
#div-middle-02 { float: left; background-color: #fff9ca; width: 100%; height: 50px; } #middle-wrap-02 { margin: 0 200px 0 150px; } #div-left-02 { float: left; background-color: red; width: 150px; margin-left: -100%; height: 50px; } #div-right-02 { float: left; background-color: yellow; width: 200px; margin-left: -200px; height: 50px; }
好啦,一个左右定宽,中间自适应的三列布局以双飞翼的方式成功完成。
#div-middle-02 { float: left; background-color: #fff9ca; width: 100%; height: 50px; } #middle-wrap-02 { margin: 0 200px 0 150px; } #div-left-02 { float: left; position: relative; background-color: red; width: 150px; margin-left: -100%; height: 50px; } #div-right-02 { float: left; position: relative; background-color: yellow; width: 200px; margin-left: -200px; height: 50px; }
See the Pen flex-three-columns by xal821792703 ( @honoka ) on CodePen .
看完了强大的双飞翼布局,是不是已经心急火燎地想亲手试试啦。别急,客官,再听我唠唠 CSS3 的新布局 flex 呗。先让我说明一下上面的 DEMO 中是怎样实现本次实例的:
.flex { display: flex; flex-flow: row; } #div-left-03 { background-color: red; width: 150px; height: 50px; } #div-middle-03 { background-color: #fff9ca; width: 100%; height: 50px; } #div-right-03 { background-color: yellow; width: 200px; height: 50px; }
效果如下图:
Flex 布局教程:语法篇
Flex 布局教程:实例篇
最后感谢大家的阅读,欢迎前往我的 repo 查看源代码整理,有任何问题也请尽情向我吐槽。