您的位置：首页 > Web前端 > CSS

css+div三列宽度自适应

2015-09-07 17:28 621 查看
源码：

<!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"/>
<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; /*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识别。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航