圣杯与双飞翼布局

2022-1-11

圣杯布局

<div class="container">
<div class="middle">中间内容</div>
<div class="left">左侧区域</div>
<div class="right">右侧区域</div>
</div>

注意左盒子和右盒子都是在中间盒子的下方

我们先给container设置一个padding：0 200px,将左右两边各腾出200px宽度。
接下来我们只需要将left,right，两个盒子放在两个区域就行啦。
最后分别给left，right设置margin属性调整位置

#content{
overflow: hidden;
padding: 0 200px;
}
#left{
margin-left:-100% ;
} 
#right{
margin-left: -200px;

可以看到left，right和middle就来到了同一行，给left和right分别一个relative定位将他们调整到两端即可。

#left{ margin-left:-100% ; position: relative; left:-200px; } #right{ margin-left: -200px; position: relative; left:200px; }

双飞翼布局

与圣杯区别：双飞翼布局不设置内padding，通过在middle下添加了一个middle-inner盒子并设置magin来将middle的内容放在这个盒子里面（这有什么用呢？不着急咱先往下看）

#middle{
idth:100%;
float:left;
}
#left{
float: left;
margin-left: -100%;
}
#right{
float: left;
margin-left: -200px;
}

这时我们发现middle中的内容不见了,给float的左盒子遮住了，这是midlle-inner盒子就派上用场了，此时只需要给这个盒子设置一个margin：0 200px便可

.middle-inner{ margin: 0 200px; }

总结

双飞翼布局其实和圣杯布局的精髓是一样的，都是通过设置负margin来实现元素的排布：

相同点：

注意：html结构中盒子的顺序是中，左，右
三个盒子都设置左浮动（middle盒子width：100%）
左右盒子通过负margin来上升（不被挤下来），左-100%，右-自身宽度，使得与middle盒子同一直线

不同点：

html结构不同，双飞翼是在middle元素内部又设置了一个milddle-inner并设置它的左右margin，而非圣杯布局的padding，最终目的都是排除两边元素的覆盖。
双飞翼布局可以多了一个html结构，但是可以不用设置left,right元素的相对定位。

完整代码：

圣杯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrap">
        <div id="header">header</div>
        <div id="content">
            <div id="middle">
                middle
            </div>
            <div id="left">left</div>         
            <div id="right">right</div>
        </div>
        <div id="footer">footer</div>
    </div>
</body>
</html>

双飞翼

*{
    margin: 0;
    padding: 0;
}
body{
    min-width: 600px;
}
#header,#footer{
    height: 50px;
    width: 100%;
    background: grey;
}
#middle,#left,#right{
    float: left;
}
#content{
    overflow: hidden;
    padding: 0 200px;
}
#left,#right{
    width: 200px;
    height: 200px;
    background: pink;
}
#middle{
    width: 100%;
    height: 200px;
    background: yellowgreen; 
}
 #left{
    margin-left:-100% ;
    position: relative;
    left:-200px;
} 
#right{
    margin-left: -200px;
    position: relative;
    left:200px; 
}

阅读剩余

作者：chun

链接：https://chun53.top/752.html

文章版权归作者所有，未经允许请勿转载。

THE END