Code
<!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:150px;
border-right:150px solid #333333;
border-left:150px solid #999999;
background:#cccccc;
}
.left{}{
float:left;
margin-left:-150px;
position:relative;
width:150px;
};
.center{}{
float:left;
width:150px;
};
.right{}{
float:right;
position:relative;
width:150px;
margin-right:-150px;
color:#ffffff;
};
.clear{}{
clear:both;
};
</style>
</head>
<body>
<div class = "main">
<div class = "left">左侧内容</div>
<div class = "center">中间内容<br />中间内容<br />中间内容<br />中间内容<br />中间内容</div>
<div class = "right">右侧内容</div>
<div class = "clear"></div>
</div>
</body>
</html>
<!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:150px;
border-right:150px solid #333333;
border-left:150px solid #999999;
background:#cccccc;
}
.left{}{
float:left;
margin-left:-150px;
position:relative;
width:150px;
};
.center{}{
float:left;
width:150px;
};
.right{}{
float:right;
position:relative;
width:150px;
margin-right:-150px;
color:#ffffff;
};
.clear{}{
clear:both;
};
</style>
</head>
<body>
<div class = "main">
<div class = "left">左侧内容</div>
<div class = "center">中间内容<br />中间内容<br />中间内容<br />中间内容<br />中间内容</div>
<div class = "right">右侧内容</div>
<div class = "clear"></div>
</div>
</body>
</html>
说明:给main元素定义了一个很宽(150px)的左边框和右边框。同时给边框添加与背景不同的颜色。通过使用负边界,在左边框添加left元素,在右边框添加right元素。
适用情况:三列中所以得高度均不固定。