1.左列固定，右列自适应
关键：左列左浮动，右列设置高度（或margin-left:121px;）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>左列固定，右列自适应</title>
<style type="text/css">
.first {border:1px solid red;height:350px;float:left;width:120px;}
.second {border:1px solid blue;height:350px;}
</style>
</head>
<body>
<div class="first">
</div>
<div class="second">
</div>
</body>
</html>
2.三列，中间自适应
关键：第一个div左浮动，第二个div右浮动，第三个div中间自适应
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>左列固定，右列自适应</title>
<style type="text/css">
body {padding:0;margin:0;}
.first {background:red;height:300px;float:left;width:120px;}
.second {background:green;height:300px;float:right;width:120px;}
.third {background:blue;height:300px;margin:0 120px;}
</style>
</head>
<body>
<div class="first">111</div>
<div class="second">333</div>
<div class="third">222</div>
</body>
</html>
3.垂直居中
关键：position：absolute；top：50%；height：hpx；margin-top：-h/2px;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>垂直居中1</title>
<style type="text/css">
.content {
border:1px solid red;
position:absolute;
top:50%;
height:240px;
width:120px;
margin-top:-120px; /* negative half of the height */
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>
