圣杯布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动圣杯布局</title>
<style>
*{ margin:0;padding:0;color:#fff;text-align: center;
}
.wrap{
padding-left: 100px;
padding-right: 160px;
}
.wrap div{
float: left;
}
.wrap:after{
content: "";
display: block;
clear: both;
}
.b{
width: 100px;
height: 100px;
background-color: red;
margin-left: -100%;
position: relative;
left: -100px;
}
.c{
width: 160px;
height: 150px;
background-color: blue;
margin-left: -160px;
position: relative;
right: -160px;
}
.a{
width: 100%;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="wrap">
<div class="a">1</div>
<div class="b">2</div>
<div class="c">3</div>
</div>
</body>
</html>
有一个缺点：当 .a 的宽度缩放到 .b的宽度，就会造成错乱。
使用 CSS双飞翼布局就可以解决当前问题
双飞翼布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS双飞翼布局</title>
<style>
.main,.left,.right{
float: left;
}
.main{
width: 100%;
}
.left{
width: 100px;
height: 100px;
background-color: red;
margin-left: -100%;
}
.right{
width: 160px;
height: 100px;
background-color: blue;
margin-left: -160px;
}
.center{
height: 160px;
background-color: pink;
margin-left: 100px;
margin-right: 160px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main">
<div class="center">center</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
网友评论