来源
“圣杯布局的出现是来自于 alistapart 上的一篇文章In Search of the Holy Grail。比起双飞翼布局,它的起源不是源于对页面的形象表达。在西方,圣杯是表达“渴求之物”的意思。而双飞翼布局则是源于淘宝的UED,可以说是灵感来自于页面渲染。”
优势
一起来看看淘宝的头部实现:
“通过缩放页面就可以发现,随着页面的宽度的变化,这三栏布局是中间盒子优先渲染,两边的盒子框子固定不变,即使页面宽度变小,也不影响我们的浏览。”
【感悟】我做页面的时候,左右布局经常用一边固定,另一边用绝对定位,左右卡死。但是当屏幕变大或变小的时候就容易比例失调。毕竟一边是自适应,另一边永远是这么大。所以根据情况应该考虑百分比的左右布局。比如如果是有导航条的左右布局(或上下布局),肯定是让导航条固定宽度(或高度)。但是如果是图文展示性质的左右布局,根据大致比例就可以用百分比的形式。
左右布局(上下布局)别人是怎么做的?真应该去了解一下。
应用场景
一定要注意他们的应用场景。都是两边固定宽度,才可以使用。如果不是固定宽度,比如以后可能会添加,删除按钮则不可以使用。因为维护起来太麻烦,总是得去改宽度。
收获
双飞翼布局更适合用于三列布局这种场景,对于普通的左右布局,或者上下布局,应该用position:absolute
会更加方便一些。