圣杯布局和双飞翼布局实现方式的区别?
答:共同点:
都使用了float
中间部分在文档前面,为了优先加载
区别:
圣杯:
左、中、右三个盒子在一个同一个盒子中,设置外侧盒子的padding,从而留出两侧盒子位置
双飞翼:
左、中、右三个盒子同级,在中间盒子里放一个小盒子,设置小盒子的margin,从而留出两侧盒子位置
具体实现还是有一些区别,如下:
1. 圣杯布局
html代码
// 圣杯布局
<body>
<div id="header">header</div>
<div id="container">
<div id="middle" class="column">middle</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>
</div>
<div id="footer">footer</div>
</body>
css代码
body{
margin: 0px;
padding: 0px;
min-width: 550px;
}
#header{
width:100%;
background-color:darkgrey;
height: 30px;
}
#container {
padding-left: 200px;
padding-right: 150px;
overflow: hidden;
}
#middle {
width: 100%;
background-color: green;
height: 500px;
}
#left {
width: 200px;
margin-left: -100%;
position: relative;
right: 200px;
background-color: red;
height: 500px;
}
#right {
width: 150px;
margin-right: -150px;
background-color: blue;
height: 500px;
}
#footer{
width:100%;
background-color:darkgrey;
height: 30px;
}
.column {
float: left;
}
实现效果:
2. 双飞翼布局
html 代码:
<div class="wrap">
<div id="header">header</div>
<div id="content">
<div id="middle">
<div class="middle-inner">
middle
</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
</div>
css代码:
*{
margin: 0;
padding: 0;
}
.wrap{
min-width: 600px;
}
#header,#footer{
height: 50px;
width: 100%;
background:grey;
}
#left,#right{
width: 200px;
height: 200px;
background: green;
}
#middle{
background: pink;
width: 100%;
float: left;
height:200px;
}
#content{
overflow: hidden;
}
.middle-inner{
margin: 0 200px;
}
#left{
float: left;
margin-left: -100%;
}
#right{
float: left;
margin-left: -200px;
}
原文链接:https://juejin.cn/post/7072158430294704135
原文链接:https://blog.csdn.net/Dg_Zing/article/details/88321472