CSS+div自动调整宽度问题

2024年12月03日 09:41
有5个网友回答
网友(1):

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

网友(2):

用百分比的话必须都用百分比。

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

网友(3):

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



网友(4):





无标题文档













zhong2

zhong3









/*楼主的问题CSS很难解决,JS可以。楼上有位同学粗心,没有回答完整;现在楼主可以复制试一试了;
还有上面的代码如果是做进站页面的话没问题,但是做首页的话,应该会出现问题。如果屏幕太大,网页的内容就会分的很散,显得不美观。
建议楼主可以试试我注释掉的CSS,先是zhong2、zhong3自适应;然后给rongqi定义个最大值并居中,保持网站整体宽度,这样网页可以一定的自适应宽度。忙了好长时间, 一定要给分啊!声明:如果你拖拉浏览器尺寸 ,请刷新一下 ;因为JS要从新执行一遍;
*/

网友(5):

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