css+div三列宽度自适应

最新推荐文章于 2021-06-15 12:38:06 发布

mosliang

最新推荐文章于 2021-06-15 12:38:06 发布

阅读量6.2k

点赞数

分类专栏： UI-CSS 文章标签： div css xhtml float ie html

UI-CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

http://blog.163.com/ronghao1987@126/blog/static/96613068201001935844800/

源码：

<!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>

<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; /*For FF*/
_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"975px":"auto"); /*For IE6*/
border:1px solid #33CCFF;
}
#dyhead {
background-color: #eee;
border:1px dotted green;
}
#center:after{
content:".";
visibility:hidden;
display:block;
height:0;
clear:both;
}
#center{/*用以闭合内层3个浮动的层*/
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((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识别。
PS：更多技术交流，到http://chris.cf-blog.cn/吧！

mosliang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css+div三列宽度自适应

http://blog.163.com/ronghao1987@126/blog/static/96613068201001935844800/源码：3列布局body {font-family: Verdana, Arial;margi
复制链接

扫一扫