高手进！--【CSS怎么实现三列浮动中间列宽度自适应】 5
要求左栏宽度固定且居左显示，右栏宽度固定且居右显示，中间栏在左右两栏之间随左右两栏间距变化自适应宽度。谢谢啦！...
要求左栏宽度固定且居左显示，右栏宽度固定且居右显示，中间栏在左右两栏之间随左右两栏间距变化自适应宽度。
谢谢啦！ 展开
谢谢啦！ 展开
1个回答
展开全部
今天我给大家介绍一下div+css三列宽度自适应的布局实例，希望对自适应宽度还不是很了解的朋友有所帮助。（提示：这里的宽度自适应是指中间宽度自动适应，左右两列固定宽度。）
以下代码兼容IE6及以上、火狐、OPERA等目前主流浏览器。
本实例，我用了一个hack来使IE6兼容，请看以下实例代码
<!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=utf-8〃 />
<title>div宽度自适应</title>
</head>
<body>
<style type=”text/css”>
body{margin:0; background:#fff; color:#4b4b4b; font-size:12px; line-height:20px; font-family:Arial, Helvetica, sans-serif}
a{color:#4b4b4b; text-decoration:none}
a:hover{color:#ed6911; text-decoration:none}
ul{margin:0; padding:0}
li{list-style:none}
.clear{clear:both}
.clear{clear:both}
.wrap{margin-top:5px}
.wrap_left{width:190px; display:block; min-height:500px; height:auto!important; height:500px; border-top:1px #d7d7d7 solid; background:#f7f7f7; float:left}
.wrap_left li{list-style:none; display:block; line-height:28px; font-weight:bold; border-bottom:1px #d7d7d7 solid}
.wrap_left li a{display:block; width:166px; height:28px; padding-left:24px}
.wrap_left li a:hover{padding-left:24px; color:#ec6911; background:#f9e5d4}
.wrap_right{display:block; margin-right:12px; border:1px #c5c5c5 solid; width:190px; min-height:200px; height:auto!important; height:200px; float:right}
*html .wrap_right{margin-right:6px}
.wrap_right h4{margin:0; padding:0 8px; font-weight:lighter; border-bottom:1px #c5c5c5 solid; line-height:22px; font-size:14px}
.wrap_right li{list-style:none; display:block; padding-top:8px}
.wrap_right li a{display:block; padding:0 2px 0 20px}
.wrap_right span{display:block; text-align:right; padding:12px 8px}
.wrap_right span a{background:none; color:#FF6600}
.wrap_center{margin:0 210px 0 198px; padding:0}
.wrap_list{display:block; min-height:180px; border:1px #f8b986 solid; height:auto!important; padding:10px; height:180px}
.wrap_list li{display:block; width:360px; margin-right:60px; float:left}
.wrap_list li a{display:block; padding:0 14px; line-height:24px}
</style>
<div>
<ul>
<li><a href=”#”>个人办公</a></li>
<li><a href=”#”>工作流程</a></li>
<li><a href=”#”>综合行政</a></li>
<li><a href=”#”>档案中心</a></li>
<li><a href=”#”>文档中心</a></li>
<li><a href=”#”>人力资源</a></li>
<li><a href=”#”>进销存管理</a></li>
<li><a href=”#”>系统管理</a></li>
<li><a href=”#”>实用工具</a></li>
</ul>
<ul>
<h4>省心贴士</h4>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<span><a href=”#”>更多 >></a></span>
</ul>
<div>
<div>
<ul>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<div></div>
</ul>
</div>
</div>
<div></div>
</div>
</body>
</html>
以下代码兼容IE6及以上、火狐、OPERA等目前主流浏览器。
本实例，我用了一个hack来使IE6兼容，请看以下实例代码
<!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=utf-8〃 />
<title>div宽度自适应</title>
</head>
<body>
<style type=”text/css”>
body{margin:0; background:#fff; color:#4b4b4b; font-size:12px; line-height:20px; font-family:Arial, Helvetica, sans-serif}
a{color:#4b4b4b; text-decoration:none}
a:hover{color:#ed6911; text-decoration:none}
ul{margin:0; padding:0}
li{list-style:none}
.clear{clear:both}
.clear{clear:both}
.wrap{margin-top:5px}
.wrap_left{width:190px; display:block; min-height:500px; height:auto!important; height:500px; border-top:1px #d7d7d7 solid; background:#f7f7f7; float:left}
.wrap_left li{list-style:none; display:block; line-height:28px; font-weight:bold; border-bottom:1px #d7d7d7 solid}
.wrap_left li a{display:block; width:166px; height:28px; padding-left:24px}
.wrap_left li a:hover{padding-left:24px; color:#ec6911; background:#f9e5d4}
.wrap_right{display:block; margin-right:12px; border:1px #c5c5c5 solid; width:190px; min-height:200px; height:auto!important; height:200px; float:right}
*html .wrap_right{margin-right:6px}
.wrap_right h4{margin:0; padding:0 8px; font-weight:lighter; border-bottom:1px #c5c5c5 solid; line-height:22px; font-size:14px}
.wrap_right li{list-style:none; display:block; padding-top:8px}
.wrap_right li a{display:block; padding:0 2px 0 20px}
.wrap_right span{display:block; text-align:right; padding:12px 8px}
.wrap_right span a{background:none; color:#FF6600}
.wrap_center{margin:0 210px 0 198px; padding:0}
.wrap_list{display:block; min-height:180px; border:1px #f8b986 solid; height:auto!important; padding:10px; height:180px}
.wrap_list li{display:block; width:360px; margin-right:60px; float:left}
.wrap_list li a{display:block; padding:0 14px; line-height:24px}
</style>
<div>
<ul>
<li><a href=”#”>个人办公</a></li>
<li><a href=”#”>工作流程</a></li>
<li><a href=”#”>综合行政</a></li>
<li><a href=”#”>档案中心</a></li>
<li><a href=”#”>文档中心</a></li>
<li><a href=”#”>人力资源</a></li>
<li><a href=”#”>进销存管理</a></li>
<li><a href=”#”>系统管理</a></li>
<li><a href=”#”>实用工具</a></li>
</ul>
<ul>
<h4>省心贴士</h4>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<span><a href=”#”>更多 >></a></span>
</ul>
<div>
<div>
<ul>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<div></div>
</ul>
</div>
</div>
<div></div>
</div>
</body>
</html>
参考资料： http://www.alisterdesign.com/archives/48
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
