双飞翼布局和圣杯布局

最新推荐文章于 2025-06-03 09:19:53 发布

weixin_44424187

最新推荐文章于 2025-06-03 09:19:53 发布

阅读量215

点赞数

文章标签：圣杯布局

原文链接：http://www.3mooc.com/front/articleinfo/89

圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局（想象一下圣杯是主体是加上两个耳朵；鸟儿是身体加上一对翅膀），圣杯布局是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师（传说是玉伯）改进并传播开来，在中国也有叫法是双飞翼布局，它的布局要求有几点：

三列布局，中间宽度自适应，两边定宽；

中间栏要在浏览器中优先展示渲染；

允许任意列的高度最高；

双飞翼布局下面我们看看具体的实现方法。

HTML部分：

<div class="container">

    <div class="main">中间部分</div>

</div>

    <div class="left">左边</div>

    <div class="right">右边</div>

CSS部分：

.left,.right{width: 100px;background-color: red;float: left;height: 200px;}

.left{margin-left: -100%;}

.right{margin-left: -100px;}

.container{width:100%;height: 200px;float: left;background-color: pink;}

.main{background-color: orange;margin: 0 100px;}

圣杯布局下面我们看看具体的实现方法。

HTML部分：

<div class="main">中间</div>

<div class="left">左边</div>

<div class="right">右边</div>

CSS部分：

section{padding: 0 100px;}

section div{height: 200px;}

.left,.right{width: 100px;background-color: red;float: left; position: relative; }

.left{margin-left: -100%;left: -100px;}

.right{margin-left: -100px;right: -100px;}

.main{width:100%;float: left;background-color: pink;}