<!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=gb2312" />
<title>三列布局中有一列内容固定</title>
<style type="text/css">
.main{
width:450px;
background:#C3C;
height:auto;
text-align:center;
}
.content{
float:left;
width:150px;
background:#CC9;
}
.center{
float:right;
position:relative;
margin-right:-150px;
width:150px;
background:#C90;
}
.left{
float:left;
width:150px;
margin-left:-150px;
position:relative;
background:#CC9;
color:#FFF;
}
.middle{
float:right;
width:150px;
}
.right{
float:right;
width:150px;}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="main">
<div class="content">
<div class="center">
<div class="left">
left 可变内容部分<br/>
</div>
<div class="middle">center 可变部分<br/>可变内容部分<br/>可变内容部分<br/>可变内容部分<br/>可变内容部分<br/>可变内容部分<br/>可变内容部分<br/>可变内容部分<br/>可变内容部分<br/>
</div>
</div>
</div>
<div class="right">right 固定部分</div>
<div class="clear">
</div>
</div>
</body>
</html>
1.左边高度变化
2.中间~~
3.右边内容变化
扫一扫
6152
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
