页面常用布局
1.固定三列
<!DOCTYPE html>
<html>
<head>
<title>固定三列</title>
<style type="text/css">
body{
margin-left:auto;
margin-right:auto;
width:900px;
}
.left{
width: 200px;
background-color: red;
height: 500px;
float: left;
}
.center{
width: 500px;
background-color: blue;
height: 500px;
float: left;
}
.right{
width:200px;
background-color: green;
height: 500px;
float: left;
}
</style>
</head>
<body>
<div class='left'></div>
<div class='center'></div>
<div class='right'></div>
</body>
</html>
2.三列，定高,左右定宽,中间自适应
<!DOCTYPE html>
<html>
<head>
<title>定高,左右定宽,中间自动</title>
<style type="text/css">
.left{
width: 200px;
background-color: red;
float: left;
height: 500px;
}
.center{
background-color: blue;
margin-left: 200px;
height: 500px;
margin-right: 200px;
}
.right{
width: 200px;
background-color: green;
float: right;
margin-top: -500px;
height: 500px;
}
</style>
</head>
<body>
<div class='left'></div>
<div class='center'></div>
<div class='right'></div>
</body>
</html>
3.三列，不定高,左右定宽,中间自适应
<!DOCTYPE html>
<html>
<head>
<title>不定高,左右定宽,中间自适应</title>
<style type="text/css">
.left{
width: 200px;
background-color: red;
position: absolute;
top:0px;
left:0px;
height: 500px;
}
.center{
background-color: blue;
margin-left: 200px;
height: 500px;
margin-right: 200px;
}
.right{
width: 200px;
background-color: green;
position: absolute;
right: 0px;
top:0px;
height: 300px;
}
</style>
</head>
<body>
<div class='left'></div>
<div class='center'></div>
<div class='right'></div>
</body>
</html>
4.两列，左定宽,右自适应
<!DOCTYPE html>
<html>
<head>
<title>左定宽,右自适应</title>
<style type="text/css">
.left{
width: 200px;
background-color: red;
height: 500px;
float:left;
}
.right{
width:auto;
background-color: green;
margin-left:200px;
height: 500px;
}
</style>
</head>
<body>
<div class='left'></div>
<div class='right'></div>
</body>
</html>
5.两列，右定宽，左自适应
<!DOCTYPE html>
<html>
<head>
<title>右定宽,左自适应</title>
<style type="text/css">
.left{
width: 200px;
background-color: red;
height: 500px;
margin-right: 200px;
width:auto;
}
.right{
width: 200px;
background-color: green;
height: 500px;
float:right;
}
</style>
</head>
<body>
<div class='right'></div>
<div class='left'></div>
</body>
</html>
欢迎各位看官贴出更好的布局类型和方法！
