<!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>
<title>test</title>
<style type = "text/css">

.main{
}{
width:450px;
background:#cccccc;
}
.content{
}{
float:left;
width:150px;
background:#999999;
};
.left{
}{
float:left;
margin-left:-150px;
width:150px;
position:relative;
background:#999999;
color:#000000;
};
.content_center{
}{
float:right;
margin-right:-150px;
width:150px;
position:relative;
background:#333333;
color:#ffffff;
};
.middle{
}{
float:right;
width:150px;
};
.right{
}{
float:right;
width:150px;
};
.clear{
}{
clear:both;
};
</style>
</head>
<body>
<div class = "main">
<div class = "content">
<div class = "content_center">
<div class = "left">左侧可变内容,左侧可变内容</div>
<div class = "middle">中间可变内容,中间可变内容,中间可变内容,中间可变内容</div>
</div>
</div>
<div class = "right">右侧固定内容</div>
<div class = "clear"></div>
</div>
</body>
</html>注意:使用该样式的时候,一定要知道固定内容的确切高度,定义可变内容的高度与固定内容的高度相同。
适用情况:三列中只有一列的内容固定。