阅读 46

圣杯布局和双飞翼布局

圣杯布局和双飞翼布局都是实现三栏布局,左右两栏定宽,中间自适应,中间放在文档流前面并优先渲染。

区别在于代码的实现的方式不同,简单来讲:双飞翼布局比圣杯布局多创建了一个div,但是不用相对布局了。

圣杯布局:

原理:利用浮动,左中右处于浮动状态。容器利用padding-left,padding-right将左右块的预留的宽度定义出来。左右块通过设置magin-left的值为负数将自身和中间块在同一水平位置上。左右块再通过相对定位,移除容器到预留的位置上去。

/* css */
.container {
    padding-left: 150px;
    padding-right: 190px;
    height: 300px;
}
.main {
    float: left;
    width: 100%;
    background: #0ff;
    height: 100%;
}
.left {
    float: left;
    width: 150px;
    margin-left: -100%;
    position: relative;
    left: -150px;
    background: #f0f;
    height: 100%;
}
.right {
    float: left;
    width: 190px;
    margin-left: -190px;
    position: relative;
    right: -190px;
    background: #ff0;
    height: 100%;
}
复制代码
<!-- html -->
<div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>
复制代码

双飞翼布局

左中右块都设置成浮动元素,在中间块中再添加一个元素,用来展示中间块内容,将元素设置margin-left,margin-right属性,预留出中间块的内容。左右块通过设置margin-left移动的设定的位置上去。

/* css */
.container {
    height: 300px;
}
.main-wrap {
    width: 100%;
    float: left;
}
.main {
    margin-left: 150px;
    margin-right: 190px;
    background: #0ff;
    height: 100%;
}
.left {
    float: left;
    width: 150px;
    margin-left: -100%;
    background: #f0f;
    height: 100%;
}
.right {
    float: left;
    width: 190px;
    margin-left: -190px;
    background: #ff0;
    height: 100%;
}
复制代码
<!-- html -->
<div class="container">
    <div class="main-wrap">
        <div class="main"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</div>
复制代码
文章分类
前端
文章标签