圣杯布局
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圣杯布局</title>
</head>
<style type="text/css">
body {
min-width: 550px;
}
#header {
text-align: center;
background-color: #f1f1f1;
}
#container {
padding-left: 200px;
padding-right: 150px;
}
#container .column {
float: left;
}
#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 {
clear: both;
text-align: center;
background-color: #f1f1f1;
}
</style>
<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>
效果
理解:圣杯布局的关键代码部分就是要了解margin-left的负值问题
这个可以之间看我的另一篇文章的第二小点:margin的负值问题
双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
圣杯布局相对双飞翼布局较简单些,重点也是弄懂margin的负值问题
margin的负值问题