双飞翼布局（圣杯布局）
2015-04-30 17:06
295 查看
主要利用CSS：浮动 float, 负边距 negative margin， 相对定位 relative position 来实现三列布局自适应：
参考来源：http://alistapart.com/article/holygrail
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
min-width: 550px;
}
#header{
height: 50px;
background-color: #666;
}
#container{
padding-left: 200px;
padding-right: 150px;
}
.column{
position: relative;
float: left;
height: 300px;
}
#center{
width: 100%;
background-color: #D6D6D6;
}
#left{
margin-left: -100%;
right: 200px;
width: 200px;
background-color: #7BD;
}
#right{
margin-right: -150px;
width: 150px;
background-color: #F63;
}
#footer {
clear: both;
height: 50px;
background-color: #666;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="container">
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div>
<div id="footer"></div>
</body>
</html>参考来源：http://alistapart.com/article/holygrail
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 