主要利用CSS：浮动 float, 负边距 negative margin， 相对定位 relative position 来实现三列布局自适应：
<!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>
55
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
