【质问阿里】既然「圣杯布局」有缺陷为什么要设计「双飞翼布局」而不是使用绝对定位

zwwill_木羽
  • 6.3k

大家都知道,「圣杯布局」和「双飞翼布局」都是为了解决经典三栏问题的优化方案,

因为「圣杯布局」存在宽度过小导致布局混乱的缺陷(如下图),阿里淘宝提出了「双飞翼布局」

clipboard.png

以下是两个demo
「圣杯布局」:https://jsfiddle.net/zwwill/p...
「双飞翼布局」:https://jsfiddle.net/zwwill/5...

但是「双飞翼布局」增加了 DOM 树的层级,因此也会增加 浏览器渲染引擎构建布局树时的计算消耗,来看一下「双飞翼布局」的dom部分

<div class="container">
    <div class="header">header</div>
    <div class="wrapper clearfix">
        <div class="main col">
            <div class="main-wrap">main</div>
        </div>
        <div class="left col">left</div>
        <div class="right col">right</div>
    </div>
    <div class="footer">footer</div>
</div>

个人任务,绝对定位即可解决此问题 https://jsfiddle.net/zwwill/a...
如下:

    <div class="header">header</div>
    <div class="wrapper">
        <div class="main col">
            main
        </div>
        <div class="left col">
            left
        </div>
        <div class="right col">
            right
        </div>
    </div>
    <div class="footer">footer</div>
.wrapper {
  position: relative; 
}
.main {
  margin:0 100px;
}
.left {
 position: absolute;
 left: 0;
 top: 0;
}
.right {
 position: absolute;
 right: 0;
 top: 0;
}

所以,请问

既然「圣杯布局」有缺陷为什么要设计「双飞翼布局」而不是使用绝对定位

回复
阅读 3.9k
3 个回答

666,一种界面,三种布局,感觉楼主的布局不错,最窄的情况也不会乱,fork了 顺便问下楼主,这个新的叫什么布局

应该有中间部分高度不确定,两边超过中间高度这种情况

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏