tips: 接下去会在 github 写博客, 简书不再更新和修改文章, 欢迎大家逛逛我的新博客点击查看 , 我会尽量用更容易理解的方式写好每一篇博客, 大家一起学习交流
圣杯布局
- <div class="wrapper">
- <div class="col main">main</div>
- <div class="col left">left</div>
- <div class="col right">right</div>
- </div>
- .wrapper {
- padding: 0 120px 0 100px;
- overflow: hidden;
- }
- .col {
- position: relative;
- float: left;
- }
- .main {
- width: 100%;
- background-color: red;
- }
- .left {
- width: 100px;
- margin-left: -100%;
- left: -100px;
- background-color: green;
- }
- .right {
- width: 120px;
- margin-left: -120px;
- right: -120px;
- background-color: blue;
- }
缺点: 圣杯布局有个问题, 当面板的 main 部分比两边的子面板宽度小的时候, 布局就会乱掉因此也就有了双飞翼布局来克服这个问题
双飞翼布局
它与圣杯布局很像, 也是全部往左浮动, 但是在内容 div 里再嵌套一个 div, 设置子 div 的 margin 为左右 div 预留位置, 左右 div 只设置 margin 负值即可实现链接 : 这篇文章一步步借图剖析, 写得很好
相似点:
1. 给 main 设置 width: 100%, 占满窗口, 从而自适应
2. 为了形成在一行三栏布局, 给三个方块都加上浮动 float: left;(注意清除浮动, 因为浮动会导致父元素高度塌陷)
3. 利用负 margin-left 把三个方块拉到一行, margin-left 负多少就是往左移动多少, 左边需要相对父元素的 - 100%, 移到父元素的最左边, 右边只需要移动本身宽度的负值, 即可在最右边
image
区别:
1. 双飞翼布局给主面板添加了一个父标签用来通过 margin 给子面板腾出空间
2. 圣杯采用的是 padding, 而双飞翼采用的 margin, 解决了圣杯布局的问题
3. 双飞翼布局不用设置相对布局, 以及对应的 left 和 right 值
- <div class="wrapper">
- <div class="col main">
- <div class="main-wrap">main</div>
- </div>
- <div class="col left">left</div>
- <div class="col right">right</div>
- </div>
- .wrapper {
- padding: 0;
- overflow: hidden;
- }
- .col {
- float: left;
- }
- .main {
- width: 100%;
- background-color: red;
- }
- .main-wrap {
- margin: 0 120px 0 100px;
- }
- .left {
- width: 100px;
- margin-left: -100%;
- background-color: green;
- }
- .right {
- width: 120px;
- margin-left: -120px;
- background-color: blue;
- }
flex 布局
思路: 顺着主轴依次放 3 列, 内容在最前, 通过 order 控制显示顺序, 通过 flex-grow 让中间占据全部剩余空间, 通过 flex-basis 设置左右 div 的宽度
- <div class="wrapper">
- <div class="main">
这是中间
- </div>
- <div class="left"> 这是左侧 </div>
- <div class="right"> 这是右侧 </div>
- </div>
- .wrapper{
- display: flex;
- }
- .main{
- background-color: red;
- flex-grow: 1;
- }
- .left{
- flex:0 1 100px;
- background-color: blue;
- order: -1;
- }
- .right{
- flex:0 1 120px;
- background-color: green;
- order: 1;
- }
缺点: 兼容性
来源: http://www.jianshu.com/p/7a41ef5066e8