div+CSS实现三列布局（左右两列宽度固定，中间列自动）
相信大家对卓越亚马逊（www.amazon.cn）这个网站不陌生吧......前一段时间公司要求仿照卓越的布局来做一个光盘购物网站~~~要求在显示器下面全屏显示，兼容firefox 、IE6.0和IE7.0。
看了卓越一下，是3列的布局方式，我就用了左右两列宽度固定，中间列自动适应宽度的排版方法来排~~最终出来的效果也能兼容FF、IE6、IE7，在1024*768分辨率以上的显示器下都能正常显示~~~但，800*600的就不行了~~问题就出在中间那一列上~~
情况一：不兼容800*600。我们直接用3列的布局（左右两列宽度固定，中间列自动适应宽度）。
（示意图）
源码：
<!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" c />
<title>3列布局</title>
<style type="text/css">
body {
font-family: Verdana, Arial;
margin: 0;
font-size: 12px;
}
#dyhead {
margin-bottom: 10px;
}
#dyleft {
float: left;
width: 200px;
}
#dycenter {
margin: 0 210px;
}
#dyright {
float: right;
width: 200px;
}
#dyfoot {
margin-top: 10px;
clear: both;
}
div {
background-color: #eee;
border: dotted 1px green;
}
</style>
</head>
<body>
<div id="dyhead">头部（3列布局，左右两栏宽度固定，中间栏自适应宽度）</div>
<div id="dyleft">左栏固定宽度为200px</div>
<div id="dyright">右栏固定宽度为200px</div>
<div id="dycenter">中间自适应宽度</div>
<!--注意这里，中间3列的div的顺序不是“左中右”，而“左右中”,中间一列写在最后-->
<div id="dyfoot">底部</div>
</body>
</html>
由于左右两列宽度固定，不受分辨率的影响。但中间列就不一样了，它的宽度会随着分辨率的变化而变化，就像是X一样，是未知之数~~~~当然，分辨率越高就越有利。
假设，左右两列宽度为200px，中间列自适应宽度。现在设计在中间列的上面先放一个div，这个div用来放banner，也就是一张500px的图片。那么，这3列的宽加起来是大于或等于900px了。由此看来，这个页面显示1024*768以上的分辨率是没有问题的，但在800*600下，排版就出现了错乱，中间列“下沉”了（大家可以测试一下）。
所以，要用这种排版方法前必须想清楚像素问题，要不要兼容800*600？中间列会不会有一些宽度较大的元素，如图片、flash、文本框等等？话又说回来，现在很多网站只要求兼容1024*768分辨率以上的就可以了……
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
另外，我们再来研究一下吧。卓越网在800*600分辨率下，仍然可以正确显示！但浏览器就出现了一条下滚动条~~为什么呢？原来卓越在800*600分辨率下时，整个页面是以固定宽度的情况下显示的！也是就，用到了判断。
大家一看代码就明白了~~这是我在上面的代码中修改过来的~~让它在中间列有一张宽度为500px的图片时也可以兼容800*600。
由于IE6不识别min-width，所以用到CSS Expression在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" c />
<title>3列布局</title>
<style type="text/css">
body {
font-family: Verdana, Arial;
margin: 0;
padding:0;
font-size: 12px;
}
#container{
min-width:975px;
_width:expression_r((document.documentElement.clientWidth||document.body.clientWidth)<1000?"975px":"auto");
border:1px solid #33CCFF;
}
#dyhead {
background-color: #eee;
border:1px dotted green;
}
#center:after{
content:".";
visibility:hidden;
display:block;
height:0;
clear:both;
}
#center{
clear:both;
width:100%;
margin:10px auto;
padding:10px 0;
border:1px solid #FF0000;
}
#dyleft {
float: left;
width: 200px;
border:1px solid #9900FF;
}
#dycenter {
min-width:56.3%;
_width:expression_r((document.documentElement.clientWidth||document.body.clientWidth)<1000?"56.1%":"auto");
margin:0 210px 0 210px;
border:1px solid #0000CC;
}
#dyright {
float: right;
width: 200px;
border:1px solid #9900FF;
}
#dyfoot {
clear: both;
background-color: #eee;
border:1px dotted green;
}
</style>
</head>
<body>
<div id="container">
<div id="dyhead">头部（3列布局，左右两栏宽度固定，中间栏自适应宽度）</div>
<div id="center">
<div id="dyleft">左栏固定宽度为200px</div>
<div id="dyright">右栏固定宽度为200px</div>
<div id="dycenter">中间自适应宽度<br/><img src="file:///E|/阿君/html/培训光盘网/images/changePIC01.gif" alt="" width="500" height="150" /><br/>亲眼见她“阴”过一个MM。那次我们要争取一个重要的客户，女人让MM做个产品的展示和推介计划。那天中午，女人特地请MM去吃大餐，席间，她一反常态，用琼瑶片女主角的温柔腔调甜言蜜语：“你很努力，我都看在眼里，你真是我的好帮手……</div>
</div>
<div id="dyfoot">底部</div>
</div>
</html>
注：1、值可以自由修改。2、“_” Hack，只有IE6识别。