• 新记

    • CSS+div自动调整宽度问题

    我的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的宽度
    我的目的就是为了根据浏览器的大小自行调节宽度，楼下的几种方法我都看过了，不知道是不是我技术的问题还是不行。主要是浏览器的大小不固定，绝对定位就不好用了，只能用百分比定位！！！

    举报该文章
    相关建议   推荐于2017-09-27
    可以采用一下两种方法来自动调节栾杜问题。
    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
    温馨提示：内容为网友见解，仅供参考
    其他看法
    第1个回答  2010-03-11
    用百分比的话必须都用百分比。

    要想自适应宽度只能使用普通的块元素，正常块元素会自动的扩充到父元素的大小。
    因为使用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%;
    第2个回答  2010-03-11
    每个人有每个人的习惯。我丝毫不觉得这样的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>
    第3个回答  2010-03-17
    <!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">
    <!--
    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:#ffffff}
    #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;width:76%; max-width:900px;background: #2F8E8E; float:right; clear:right}*/
    #zhong3 {margin:0;height:130px;min-width:180px; background: #2F8E8E; float:left; clear:right}
    #you {margin:0px;width:80px;height:300px;background:#eeeeee;position: absolute;top: 100px;right: 5%;}
    -->
    </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要从新执行一遍；
    */
    第4个回答  2010-03-10
    首先指出你做网页有错误你每一个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代码让人汗颜.......................................
    12

    DIV+CSS如何实现三列宽度自适应
    那是因为对他们进行了负的左边距操作，现在只需要在左右边栏的内层div.inner将其拉回来。2、css样式写法如下：left,#right {float: left;margin: 0 0 0 -271px;width: 50%;}#main {width: 540px;float: left;background: green;}.inner {padding: 20px;}#left .inner,#right .inner {marg...

    css怎么自动调整div的位置和大小
    1、先新建一个html文件，并在head中添加样式表【styletype="text\/css">\/style>】。2、在body中添加一个DIV，并引入一个CSS，命名为【aaa】。3、给这个DIV添加背景色，并定义它的宽和高。【background:#FA2;width:400px;height:600px;】。4、然后添加如下代码。【position:fixed;left:50%;top:...

    高手进!--【CSS怎么实现三列浮动中间列宽度自适应】
    <meta http-equiv=”Content-Type” content=”text\/html; charset=utf-8〃 \/> <title>div宽度自适应<\/title> <\/head> <body> <style type=”text\/css”> body{margin:0; background:#fff; color:#4b4b4b; font-size:12px; line-height:20px; font-family:Arial, Helvetica, sans-serif...

    div css如何实现输入的文本框宽度自动调节
    <style type="text\/css">#outer {width: 400px; border: 1px solid #000; padding: 5px;}.inner {overflow: hidden;}.inner div {padding: 5px;}.label {float: left; width: 70px;}.iText {display: block; overflow: hidden;}.iText input {width: 99%;}.iButton {float: right; ...

    div+css布局错乱问题解决方法
    这个问题需要把left和right再使用一个div包含起来，直接上代码啦，下边就可以实现你要求的布局。foot总在下边，并能随着left，right的高度改变自动调整。<div id="box"> <div id="content"> <div id="left">这里是页面的左部分内容<\/div> <div id="right">这里是页面的右部分内容<\/div> <\/...

    DIV CSS 如何让网页中的某DIV自动适应屏幕高度自己变如下图
    1、首先创建或者打开我们的web项目，新建一个html文件和css文件即可，如图所示。2、html页面代码如图所示，定义一个div，然后给一个id属性即可。3、这里是使用宽度的百分比之后，设置高度值为零，然后使用padding属性的top或者bottom的值（可以是任意百分比），背景颜色作为测试。4、然后在浏览器运行之后的...

    DIV\/CSS 宽度问题
    首先 #footer 的宽度设置为100%了，其实不写的话默认也是100%的，可以省略 其次 如果你没具体给div元素设定宽度的话，100%宽度就是你目前窗口的宽度的，你DW的编辑器窗口有多大，footer就有多宽 上边绿条的代码没给，不好判断，可能有两种情况 可能是绿条设定了固定宽度了，不是100%，但你说“紫色...

    div+css 3列(左右定宽,中间自适应)布局问题
    css有一个属性叫最小宽度，min-width，说的就是当容器能缩小到最小的宽度值，但这个属性IE6不支持，而且效果也不能像你说的那样，因为他是随内容变化的，“右侧的导航栏就自动隐藏”这个用css就更做不出来了，肯定要用到JS要判断什么时候该隐藏，楼主应该去问问JS高手 ...

    DIV+CSS两列,左列宽度自适应右列固定
    <div id="MainBody">[color=#aaaaaa]<!--主体内容-->[\/color]<\/div> <\/div> <div id="Footer">[color=#aaaaaa]<!--页面底部-->[\/color]<\/div> <\/div> 为了使以后阅读代码更简易，我们应该添加相关注释，接下来打开css.css文件，写入CSS信息，代码如下：\/*基本信息*\/ body {font:12...

    div+css布局,当页面大小变化时,为什么布局也会变乱,该怎么解决?_百度...
    用div css 布局时,使用的是浮动的样式排版; 排不下就会往下面浮动; 给div 一个固定的宽度;(给一个固定的容器,如果不给就默认把浏览器窗口当容器)容器定下来后,就与浏览器的窗口大小无关了;

    相似回答
    大家正在搜
    相关问题
    内容超出div宽度后自动换行的css代码
    DIV+CSS如何实现三列宽度自适应
    div+css中..固定了宽度。在输入大量的英文时候时，自动...
    div css布局网页如何实现网页自动适应屏幕高度和宽度
    css怎么自适应宽度
    用DIV+CSS中如何设置，超出就自动换行输出。
    用CSS如何让节点宽度自动填满
    div+css怎么设置网页固定宽度且居中？