圣杯布局与双飞翼布局

最新推荐文章于 2018-09-30 10:35:46 发布

xiaoweibaba

最新推荐文章于 2018-09-30 10:35:46 发布

阅读量191

点赞数

本文链接：https://blog.csdn.net/xiaoweidreamy/article/details/82319747

版权

圣杯布局和双飞翼布局

01圣杯布局　

先简单设置header和footer（蓝色）width:100%;height:100px;
设置父容器container（黄色），不设置width
middle，left，right 均设置为float：left；
middle（红色）设置width：100%；
left(绿色)设置margin-left:-100%;
right(粉色)设置margin-left:负的right（粉色）的width；
从而把left（绿色）和right（粉色）移动到container（父容器）盒子中
给container（父容器）设置 padding-left和padding-right
为left和right预留方（可以将container的左右边距设置大于left和right的宽度，就可以在第6步使左left（绿色），右right（粉色），中middle（红色）之间有间距）
left和right使用position：relative；（相对定位）
left（绿色）:负的container的padding-left的宽度；
right（粉色）:负的container的padding-right的宽度;
定位到指定位置

效果如下

代码如下
css

html,
body{
    margin:0;
    padding:0;
    text-align:center;
    /*防止窗口缩放太小无法正常展示*/
    min-width:500px;
}
header,
footer{
    width:100%;
    height:100px;
    margin:0 auto;
    background:blue;
}
.container{
    margin:0 auto;
    /*不设置width*/
    height: 300px;
    padding-left:200px;
    padding-right:200px;
    background:yellow;
}
.middle,
.left,
.right{
    height:300px;
    float:left;
}
.middle{
    width:100%;
    background:red;
}
.left{
    position:relative;
    width:100px;
    left:-200px;
    margin-left:-100%;
    background: green;
}
.right{
    position:relative;
    right:-200px;
    width:100px;
    margin-left:-100px;
    background:pink;
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
<header>头部</header>
<div class="container">
    <div class="middle">主体部分</div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>
<footer>尾部</footer>
</body>
</html>

02双飞翼布局

先简单设置header和footer width:100%;height:100px;
设置 main，sub, extra 均为float：left；
main(红色)设置width：100%；
main_inner（橙色）设置margin-left和margin-right
为sub和extra预地方
（可以将main_inner的左右边距设置大于sub和extra的宽度，
就可以在第4步使左sub（绿色），右extra（粉色），中内main_inner（橙色）之间有间距）
sub(绿色)设置margin-left:-100%;
extra(粉色)设置margin-left:负的extra的width；
从而把sub和extra移动到上方去，即盖住部分main（红色）

5.footer清除浮动 clear:both;

效果如下

代码如下
css

html,
body{
    margin:0;
    padding:0;
    text-align:center;
    /*防止窗口缩放太小无法正常展示*/
    min-width:500px;
}
header,
footer{
    width:100%;
    height:100px;
    margin:0 auto;
    background:blue;
}
footer{
    /*清除浮动，缺点：margin失效*/
    clear:both;
    /*overflow:hidden;*/
     /*即将溢出父容器的内容隐藏*!*/
}
.main,
.sub,
.extra{
    height:300px;
    float:left;
}
.main{
    width:100%;
    background:red;
}
.main_inner{
     margin-left: 120px;
     margin-right: 120px;
    height: 300px;
    background:orange;
}
.sub{
    width:100px;
    margin-left:-100%;
    background: green;
}
.extra{
    width:100px;
    margin-left:-100px;
    background:pink;
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02双飞翼布局</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<header>header</header>
<div class="main">
    <div class="main_inner">main_inner</div>
</div>
<div class="sub">sub</div>
<div class="extra">extra</div>
<footer>footer</footer>
</body>
</html>

个人理解：

圣杯和双飞翼布局都是实现两边宽度固定，中间部分可缩放的功能

相同点：

(1)三个div设置为float：left;
(2)中间部分width:100%;左右部分分别用margin-left:-100%;margin-left:负的宽度；移动到中间。

不同点：

圣杯布局：一个大的div（container）包裹三个同级的div。
左右通过相对定位position：relative;。固定左右部分的位置。
双飞翼布局：中左右，设置为三个同级的div。“左”“右”部分覆盖在“中”部分上
中间的div嵌套一个div（main_inner）为内容

xiaoweibaba

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
圣杯布局与双飞翼布局

圣杯布局和双飞翼布局01圣杯布局　先简单设置header和footer（蓝色）width:100%;height:100px;设置父容器container（黄色），不设置width middle，left，right 均设置为float：left； middle（红色）设置width：100%；left(绿色)设置margin-left:-100%; rig...
复制链接

扫一扫