欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS 圣杯布局 / 双飞翼布局的实现

程序员文章站 2022-06-24 14:12:44
工作的越久,有些基础知识我们可能就逐渐淡忘了,今天我们来回顾一下css的圣杯布局和双飞翼布局, 这两个名词你可能不熟, 那三栏布局你肯定就非常熟悉了, 就是两边定宽, 中间自适应 的 布局 1 , 圣杯布局 首先HTML结构是这样的,因为要保证中间的结构先渲染, 所以 center 要放在 最前面 ......

工作的越久,有些基础知识我们可能就逐渐淡忘了,今天我们来回顾一下css的圣杯布局和双飞翼布局,

这两个名词你可能不熟, 那三栏布局你肯定就非常熟悉了,

就是两边定宽, 中间自适应 的 布局 

1 , 圣杯布局  

<!--三栏布局-->
<header>三栏布局</header>
<div class="container">
    <div class="center column">center</div>
    <div class="left column">left</div>
    <div class="right column">right</div>
</div>
<footer>footer</footer>

首先html结构是这样的,因为要保证中间的结构先渲染, 所以 center 要放在 最前面 。

*{
    margin: 0;
    padding: 0;
}
body{
    min-width: 700px;
}
header , footer{
    background-color: antiquewhite;
    text-align: center;
}
footer{
    clear: both;
}
.container{
    height: 200px;
}
.container .column{
    float: left;
    position: relative;
    height: 100%;
}
.center{
    width: 100%;
    background-color: tomato;
}
.left{
    width: 200px;
    background-color: aqua;
}
.right{
    width: 200px;
    background-color: chartreuse;
}

CSS 圣杯布局 / 双飞翼布局的实现

先让它们浮动, 并给left 和 right 一个 固定 宽度, center宽度100%,

footer清除浮动流, 结果变成上面这样  。

然后我们要把 left  和 right 放上去   

先把left 放上去  :

.left{
    width: 200px;
    background-color: aqua;
    margin-left: -100%;
}

加上 一个 margin-left 为  负的自己的宽度  , 变成了这样:

CSS 圣杯布局 / 双飞翼布局的实现

 

 我们可以看到 center的文字被 left  盖住了  , 所以给container加一个padding 

.container{
    height: 200px;
    padding: 0 200px;
}

变成了这样:

CSS 圣杯布局 / 双飞翼布局的实现

由于加了padding, 内容区域变小, left 也跟过来了, 所以要给left设置一个left:

.left{
    width: 200px;
    background-color: aqua;
    margin-left: -100%;
    left: -200px;
}

CSS 圣杯布局 / 双飞翼布局的实现

这样left 就到最左边了, center文字也出来了, 同理right

.right{
    width: 200px;
    background-color: chartreuse;
    margin-left: -100%;
    right: -100%;
}

最终效果:

CSS 圣杯布局 / 双飞翼布局的实现

 

2   双飞翼布局(始于淘宝的ued)

和圣杯布局差不多, 不同之处在于它们处理中间部分被两边盖住的方法不同

双飞翼布局给center加了一个inner center ,而不是在最外层加container

html:

<header>双飞翼布局</header>

<div class="center column">
    <div class="inner-center">
        center
    </div>
</div>
<div class="left column">left</div>
<div class="right column">right</div>

<footer>footer</footer>

然后 给 inner-center  加margin  (只列出关键代码) :

.center .inner-center{
    margin-left: 200px;
    margin-right: 200px;
    height: 100%;
    background-color: tomato;
}
.left{
    width: 200px;
    background-color: aqua;
    margin-left: -100%;
}
.right{
    width: 200px;
    background-color: chartreuse;
    margin-left: -200px;
}

最终效果和圣杯布局一样。。。。。。