CSS+div自动调整宽度问题

显示全部楼层 · 2010-3-11 11:57:51

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

千问 · 2010-3-11 11:57:51

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

千问 · 2010-3-11 11:57:51

首先指出你做网页有错误你每一个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代码让人汗颜.......................................

千问 · 2010-3-11 11:57:51

无标题文档
zhong2 zhong3
/*楼主的问题CSS很难解决，JS可以。楼上有位同学粗心，没有回答完整；现在楼主可以复制试一试了；还有上面的代码如果是做进站页面的话没问题，但是做首页的话，应该会出现问题。如果屏幕太大，网页的内容就会分的很散，显得不美观。建议楼主可以试试我注释掉的CSS，先是zhong2、zhong3自适应；然后给rongqi定义个最大值并居中，保持网站整体宽度，这样网页可以一定的自适应宽度。忙了好长时间，一定要给分啊！声明：如果你拖拉浏览器尺寸，请刷新一下；因为JS要从新执行一遍；*/在head与head之间加一段JS代码如下：这样应该可以解决问题；个人建议：min-width兼容性差，ie6不支持，最好不这样用，如果要用，你也可以在样式表里多加一段，即: width:expression(document.body.clientWidth<360?"360px":"auto"); 这种属于伪JS的CSS样式，只支持IE，平时也用得相当少。建议去网上下个CSS中文手册来看看，里面讲述了许多CSS的兼容问题。

千问 · 2010-3-11 11:57:51

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

千问 · 2010-3-11 11:57:51

我QQ教你