可以采用一下两种方法来自动调节栾杜问题。
1、使用百分比来实现自动适应宽度。
可以设置宽度的值为百分比,如
width=“80%”;
此时宽度就是其父元素的80%宽度。
2、可以采用是js获取屏幕的宽度,以实现宽度随不同分辨率来改变。
先关函数方法如下:
网页可见区域宽 document.body.clientWidth
网页可见区域高 document.body.clientHeight
网页可见区域宽(包括边线的宽) document.body.offsetWidth
网页可见区域高(包括边线的宽) document.body.offsetHeight
网页正文全文宽 document.body.scrollWidth
网页正文全文高 document.body.scrollHeight
网页被卷去的高 document.body.scrollTop
网页被卷去的左 document.body.scrollLeft
网页正文部分上 window.screenTop
网页正文部分左 window.screenLeft
屏幕分辨率的高 window.screen.height
屏幕分辨率的宽 window.screen.width
屏幕可用工作区高度 window.screen.availHeight
屏幕可用工作区宽度 window.screen.availWidth
用百分比的话必须都用百分比。
要想自适应宽度只能使用普通的块元素,正常块元素会自动的扩充到父元素的大小。
因为使用float, 相对和决定定位都会使元素脱离文档流的定位系统。
所以zhong3要自适应的话,它不能float 也不能使用相对或决定定位。
那么只能改zhong2 了。
设置zhong 的position:为relative;
让zhong2 绝对定位:position:absolute;width:180px;
然后让zhong3 margin-left:180px; 清除这块区域就行了。其它的什么都不用设置。
代码:
#zhong { position:relative;height: 300px;margin-right: 80px;margin-left: 80px; background:#33CCFF;overflow:hidden;}
#zhong1 {margin:0;height:150px;width:100%; background:#000000;}
#zhong2 {position:absolute;left:0;width:180px;margin:0px;height:130px;width:180px; background: #FF00FF; float:left}
#zhong3 { margin-left:180px;margin:0;height:130px;background: #2F8E8E; clear:right; width:inherit; width:100%;
每个人有每个人的习惯。我丝毫不觉得这样的CSS有什么问题。反而1楼的思路是有问题的,width:100% 是指父容器的宽度,如果父容器没有设置position: absolute;就会一直向上寻找,一直到这个标签。那么100%的宽度=html窗口的显示宽度。如果父容器设置了position: absolute,那么100%就等于父容器的宽度。
如果你认为1003是1024*768下的宽度,那么如果用户的浏览器不是这个分辨率呢。所以就像2楼所说100%是个很棒的方法。
可以改变一下思路,将2放在3里面,将3的类型改为“相对”(position: absolute;)然后左填充180PX。
再将2的类型设为绝对,左上边距0,
.zhong3 {
position: relative;
padding-left: 180px;
}
.zhong2 {
position: absolute;
left: 0px;
top: 0px;
width:180px;
}
首先指出你做网页有错误你每一个div的宽度都是用width:90%这样设定的,规范的设计是给最外层的div指定一个固定的宽度比如#rongqi{width:1003px;}然后再用%(百分比)指定rongqi的子div的宽度。
你自己设定的#rongqi{margin:0px auto;min-width:360px;width:100%;}
中的width:100%;这个100%是谁的100%,如果你说是body宽度的100% 那body的宽度在哪儿?
你开始就错了,所以里面的好多设置都无法实现。。。。
这样的css代码让人汗颜.......................................