圣杯布局和双飞翼布局的特点:
- 三栏布局,中间一栏最先加载和渲染(内容最重要)
- 两侧内容固定,中间内容随着宽度自适应
- 一般用于PC页面
圣杯布局和双飞翼布局的实现方式:
- 使用float布局
- 两侧使用margin负值,以便和中间内容横向重叠
- 为了防止中间内容被两侧覆盖,圣杯布局用padding留出空间,双飞翼布局使用margin
1. 圣杯布局
<!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>圣杯布局</title>
<style type="text/css">
body{
min-width: 550px;
}
#header{
text-align: center;
background-color: #f1f1f1;
}
#center{
background-color: #ccc;
width: 100%;
}
#left{
position: relative;
background-color: yellow;
width: 200px;
margin-left: -100%;
right: 200px;
}
#right{
background-color: red;
width: 150px;
margin-right: -150px;
}
#footer{
text-align: center;
background-color: #f1f1f1;
clear: both;
}
#container .column{
float: left;
}
#container{
padding-left: 200px;
padding-right: 150px;
}
</style>
</head>
<body>
<div id = "header">this is header</div>
<div id = "container">
<div id = "center" class="column">this is center</div>
<div id = "left" class="column">this is left</div>
<div id = "right" class="column">this is right</div>
</div>
<div id = "footer">this is footer</div>
</body>
</html>
效果
2. 双飞翼布局
<!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>双飞翼布局</title>
<style>
body{
min-width: 550px;
}
.col{
float: left;
}
#main{
width: 100%;
height: 200px;
background-color: #ccc;
}
#main-wrap{
margin: 0 190px 0 190px
}
#left{
width: 190px;
height: 200px;
background-color: #0000ff;
margin-left: -100%;
}
#right{
width: 190px;
height: 200px;
background-color: #ff0000;
margin-left: -190px;
}
</style>
</head>
<body>
<div id="main" class="col">
<div id = "main-wrap">
this is main
</div>
</div>
<div id="left" class="col">
this is left
</div>
<div id="right" class="col">
this is right
</div>
</body>
</html>
效果
3. 手写clear fix
clearfix
可以用于清除浮动,加在浮动的元素上
.clearfix:after{
content: '';
display: table;
clear: both;
}