圣杯布局和双飞翼布局达到的效果基本相同,都是侧边两栏宽度固定,中间栏宽度自适应。 主要的不同之处就是在解决中间部分被挡住的问题时,采取的解决办法不一样,圣杯布局是在父元素上设置了padding-left和padding-right,在给左右两边的内容设置position为relative,通过左移和右移来使得左右两边的内容得以很好的展现,而双飞翼则是在center这个div中再加了一个div来放置内容,在给这个新的div设置margin-left和margin-right 。
demo如下
1.双飞翼布局
构建dom元素
<div id="header">#header</div>
<div>
<div id="center">
<div class="content">#center</div>
</div>
<div id="left">#left</div>
<div id="right">#right</div>
</div>
<div id="footer">#footer</div>
注意元素结构,center部分在上面,所以先加载
统一设置浮动,以及高度
#left,
#right,
#center {
float: left;
text-align: center;
height: 300px;
line-height: 300px;
}
设置左右列的宽度,以及背景颜色,方便查看
#left {
width: 200px;
background: rgba(95, 179, 235, 0.972);
}
#right {
width: 150px;
background: rgb(231, 105, 2);
}
此时页面如图所示
三个元素均正常浮动,此时发现新的问题,footer元素高度塌陷,footer元素位置为图示箭头3所指的位置
解决办法:
1.在元素(此类说明都是指footer元素)后面加上一个div,设置清除浮动
<div style="clear:both;"></div>
2.设置元素overflow属性为auto,或者hidden
overflow: hidden;
3.让父元素也浮动(一般都不用这个)
缺点:影响整体页面布局…
4.使用伪元素(推荐)
.clearfix::after,
.clearfix::before {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
如图
接下来的任务就是使left,right元素到达指定位置即可
如图所示,left元素刚好在指定位置的正下方,所以直接添加margin属性,设置为负100%即可
#left {
width: 200px;
margin-left: -100%;
background: rgba(95, 179, 235, 0.972);
}
此时left元素归位
此时发现right离所属位置刚好为自身距离,于是设置margin为负的自身宽度
#right {
width: 150px;
margin-left: -150px;
background: rgb(231, 105, 2);
}
此时看起来是完成了,其实还差最后一步,设置center元素
.content {
margin: 0 150px 0 200px;
}
这里设置margin或者padding都可以,推荐margin,
因为margin是分开元素与元素之间的距离,padding是分开元素与内容的距离
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
body {
min-width: 550px;
font-weight: bold;
font-size: 20px;
}
#header,
#footer {
background: rgba(29, 27, 27, 0.726);
text-align: center;
height: 60px;
line-height: 60px;
}
#container {
overflow: hidden;
}
.clearfix::after,
.clearfix::before {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* .column {} */
#left,
#right,
#center {
float: left;
text-align: center;
height: 300px;
line-height: 300px;
}
#center {
width: 100%;
background: rgb(206, 201, 201);
}
#left {
width: 200px;
margin-left: -100%;
background: rgba(95, 179, 235, 0.972);
}
#right {
width: 150px;
margin-left: -150px;
background: rgb(231, 105, 2);
}
.content {
padding: 0 150px 0 200px;
}
</style>
<body>
<div id="header">#header</div>
<div class="clearfix">
<div id="center" class="column">
<div class="content">#center</div>
</div>
<div id="left" class="column">#left</div>
<div id="right" class="column">#right</div>
</div>
<!-- <div style="clear:both;"></div> -->
<div id="footer">#footer</div>
</body>
</html>
2.圣杯布局
圣杯布局和双飞翼布局差不多,原理就是直接在外层容器上加上padding,然后利用relative定位到指定位置
元素结构
<div class="header">
头部
</div>
<div class="main">
<div class="center">中间</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<div class="footer">
底部
</div>
父元素
.main {
height: 300px;
padding: 0 150px 0 200px;
background: greenyellow;
*zoom: 1;
}
大部分和上面一样,这里就简单说两句,等下下面贴出完整代码
浮动之后的样子
将left和right按照和上面一样进行margin -100%和负的自身宽度后
最后设置左右relative定位到指定位置
.left {
width: 200px;
height: 300px;
background: yellow;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
width: 150px;
height: 300px;
background: gainsboro;
margin-left: -150px;
position: relative;
left: 150px;
}
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css</title>
</head>
<style type="text/css">
body {
min-width: 550px;
}
* {
margin: 0;
padding: 0;
}
.header,
.footer {
background: gray;
width: 100%;
height: 50px;
}
.footer {
clear: both;
}
.main {
height: 300px;
padding: 0 150px 0 200px;
background: greenyellow;
*zoom: 1;
}
.left,
.center,
.right {
float: left;
}
.center {
width: 100%;
height: 300px;
background: red;
}
.left {
width: 200px;
height: 300px;
background: yellow;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
width: 150px;
height: 300px;
background: gainsboro;
margin-left: -150px;
position: relative;
left: 150px;
}
</style>
<body>
<div class="header">
头部
</div>
<div class="main">
<div class="center">中间</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<div class="footer">
底部
</div>
</body>
</html>
3.扩展
如果没有要求需要中间元素最先渲染的话,可以使用css的calc函数,如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
body {
min-width: 550px;
font-weight: bold;
font-size: 20px;
}
#header,
#footer {
background: rgba(29, 27, 27, 0.726);
text-align: center;
height: 60px;
line-height: 60px;
}
#container {
/* display: flex; */
overflow: hidden;
}
.column {
text-align: center;
height: 300px;
line-height: 300px;
}
#left,
#right {
float: left;
}
#center {
/* width: auto; */
position: absolute;
width: calc(100% - 350px);
margin-left: 200px;
height: 300px;
background: rgb(206, 201, 201);
}
#left {
width: 200px;
/* margin-left: -100%; */
background: rgba(95, 179, 235, 0.972);
}
#right {
width: 150px;
/* margin-left: -150px; */
background: rgb(231, 105, 2);
}
/* .content {
margin: 0 150px 0 200px;
} */
</style>
<body>
<div id="header">#header</div>
<div id="container">
<div id="center" class="content">#center</div>
<div id="left" class="column">#left</div>
<div id="right" class="column">#right</div>
</div>
<div id="footer">#footer</div>
</body>
</html>
没有兼容性要求的话,使用flex实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.content {
display: flex;
}
.sub {
width: 200px;
height: 500px;
background: blue;
}
.main {
flex: 1;
height: 500px;
background: red;
}
.extra {
width: 180px;
height: 500px;
background: green;
}
</style>
</head>
<body>
<!-- flex布局 -->
<div class="content">
<div class="sub"></div>
<div class="main"></div>
<div class="extra"></div>
</div>
</body>
</html>
本文首发于https://zhtblog.cn/