CSS+div自动调整宽度问题

CSS+div自动调整宽度问题

可以采用一下两种方法来自动调节栾杜问题。
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

不要让zhong3 float:left,不然他就不认老爹了,呵呵~
可以像这样子:
#zhong3 {margin-left:180px ;height:130px; background: #2F8E8E; }
试试:)
另外,想对楼上说一句,不要随便就说别人错,这里的rongqi的100%宽度是浏览器的宽度,目的是当窗口大小变化的时候自动调整页面显示,是个很棒的做法
不要试都不试就汗颜哈,只有通常的做法,没有规范的做法,只要能实现目的就是可行的

在head与head之间加一段JS代码如下：

这样应该可以解决问题；
个人建议：min-width兼容性差，ie6不支持，最好不这样用，如果要用，你也可以在样式表里多加一段，即: width:expression(document.body.clientWidth<360?"360px":"auto"); 这种属于伪JS的CSS样式，只支持IE，平时也用得相当少。建议去网上下个CSS中文手册来看看，里面讲述了许多CSS的兼容问题。

每个人有每个人的习惯。我丝毫不觉得这样的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;
}

用百分比的话必须都用百分比。
要想自适应宽度只能使用普通的块元素，正常块元素会自动的扩充到父元素的大小。
因为使用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%;

我QQ教你

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息