CSS+div自动调整宽度问题

我的html文件代码<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/... 我的html文件代码
<!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" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<link href="css.css" rel="stylesheet" type="text/css" />
<body>
<div id="rongqi">
<div id="tou">
</div>
<div id="zhu">
<div id="zuo"></div>
<div id="zhong">
<div id="zhong1"></div>
<div id="zhong2"></div>
<div id="zhong3"></div>
</div>
<div id="you"></div>
</div>
<div id="di">
</div>
</div>
</body>
</html>

我的css代码
body{margin:0px auto}
#rongqi{margin:0px auto;min-width:360px;width:100%;}
#tou {margin:0px auto;min-width:260px;width:90%; height:100px; background:#FFff00}
#zhu {margin:0px auto;min-width:260px;width:90%; height:300px; background:#FF0000}
#di {margin:0px auto;min-width:260px;width:90%; height:100px; background:#00ffee}
#zuo {margin:0px;width:80px;height:300px; background:#eeeeee;position: absolute;top: 100px; left: 5%;}
#zhong {height: 300px;margin-right: 80px;margin-left: 80px; background:#33CCFF}
#zhong1 {margin:0;height:150px;width:100%; background:#000000;}
#zhong2 {margin:0px;height:130px;width:180px; background: #FF00FF; float:left}
#zhong3 {margin:0;height:130px;min-width:180px; width:76%; background: #2F8E8E; float:left; clear:right}

#you {margin:0px;width:80px;height:300px; background:#eeeeee;position: absolute;top: 100px;right: 5%;}

我这里zhong2的宽度是180px，zhong3我想要自动调整，请问怎样才能让
zhong2+zhong3的宽度正好是zhong的宽度
我的目的就是为了根据浏览器的大小自行调节宽度，楼下的几种方法我都看过了，不知道是不是我技术的问题还是不行。主要是浏览器的大小不固定，绝对定位就不好用了，只能用百分比定位！！！展开

 我来答

8个回答

#热议# 为什么说不要把裤子提到肚脐眼？

码农小明哥
推荐于2017-09-27 · 互联网程序员一枚，欢迎交流

码农小明哥

采纳数：9602 获赞数：25062

向TA提问私信TA

关注

展开全部

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

已赞过 已踩过<

评论收起

wb_feng
2010-03-11 · TA获得超过160个赞

知道答主

回答量：133

采纳率：0%

帮助的人：162万

我也去答题访问个人页

关注

展开全部

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

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

已赞过 已踩过<

评论收起

Jo_Fly
2010-03-11 · TA获得超过178个赞

知道答主

回答量：197

采纳率：0%

帮助的人：193万

我也去答题访问个人页

关注

展开全部

每个人有每个人的习惯。我丝毫不觉得这样的CSS有什么问题。反而1楼的思路是有问题的，width:100% 是指父容器的宽度，如果父容器没有设置position: absolute;就会一直向上寻找，一直到<html>这个标签。那么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 class="zhong3">
<div class="zhong2"></div>
</div>

已赞过 已踩过<

评论收起

Ge_88
2010-03-17

知道答主

回答量：11

采纳率：0%

帮助的人：15.3万

我也去答题访问个人页

关注

展开全部

<!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" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">

</style>
<script type="text/javascript">
window.onload=function(){
document.getElementById('zhong3').style.width=document.body.clientWidth*9/10-80-80-180;
}
</script>

</head>
<link href="css.css" rel="stylesheet" type="text/css" />
<body>
<div id="rongqi">
<div id="tou">
</div>
<div id="zhu">
<div id="zuo"></div>
<div id="zhong">
<div id="zhong1"></div>
<div id="zhong2">zhong2</div>
<div id="zhong3">zhong3</div>
</div>
<div id="you"></div>
</div>
<div id="di">
</div>
</div>
</body>
</html>
/*楼主的问题CSS很难解决，JS可以。楼上有位同学粗心，没有回答完整；现在楼主可以复制试一试了；
还有上面的代码如果是做进站页面的话没问题，但是做首页的话，应该会出现问题。如果屏幕太大，网页的内容就会分的很散，显得不美观。
建议楼主可以试试我注释掉的CSS，先是zhong2、zhong3自适应；然后给rongqi定义个最大值并居中，保持网站整体宽度，这样网页可以一定的自适应宽度。忙了好长时间，一定要给分啊！声明：如果你拖拉浏览器尺寸，请刷新一下；因为JS要从新执行一遍；
*/

已赞过 已踩过<

评论收起

fanlunbing
2010-03-10 · TA获得超过562个赞

知道小有建树答主

回答量：337

采纳率：0%

帮助的人：0

我也去答题访问个人页

关注

展开全部

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

已赞过 已踩过<

评论收起

更多回答（6）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

CSS+div自动调整宽度问题

其他类似问题

为你推荐：