CSS+div自动调整宽度问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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代码
bodymargin:0px auto
#rongqimargin: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的宽度
我的目的就是为了根据浏览器的大小自行调节宽度，楼下的几种方法我都看过了，不知道是不是我技术的问题还是不行。主要是浏览器的大小不固定，绝对定位就不好用了，只能用百分比定位！！！
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 参考技术A 用百分比的话必须都用百分比。
要想自适应宽度只能使用普通的块元素，正常块元素会自动的扩充到父元素的大小。
因为使用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%; 参考技术B 每个人有每个人的习惯。我丝毫不觉得这样的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> 参考技术C <!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">
<!--
bodymargin:0px auto
#rongqimargin: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要从新执行一遍；
*/ 参考技术D 首先指出你做网页有错误你每一个div的宽度都是用width:90%这样设定的，规范的设计是给最外层的div指定一个固定的宽度比如#rongqiwidth:1003px;然后再用%（百分比）指定rongqi的子div的宽度。
你自己设定的#rongqimargin:0px auto;min-width:360px;width:100%;
中的width：100%；这个100%是谁的100%，如果你说是body宽度的100% 那body的宽度在哪儿？
你开始就错了，所以里面的好多设置都无法实现。。。。
这样的css代码让人汗颜.......................................
如何自动调整内部图像/内容的 div 宽度？
【中文标题】如何自动调整内部图像/内容的 div 宽度？【英文标题】：how to div width automatically adjust inside images / content? 【发布时间】：2015-07-07 07:15:43 【问题描述】：演示小提琴：http://jsfiddle.net/UI_Designer/2gqy9s9k/1/
容器有 4 个块..每个 div 包含 width:25%.. 所以完成容器...
如果我删除任何一个div 容器有空的空间.. 但我想再次装满容器..
它有可能吗？
.container
width:100%;
border:1px solid #333
.badge-block
float:left;
width: 25%;
.badge-block img
width:80%;
【问题讨论】：
【参考方案1】：您可以为此使用display: table; 和display: table-cell。我很确定这就是你的意思。
表格单元格占用剩余空间。所以只要像这样使用它，取出其中一张图像，你就会看到它是如何工作的。
Demo Here Too
.container
width: 100%;
border: 1px solid #333;
display: table;
.badge-block
display: table-cell;
.badge-block img
width: 80%;
<div class="container">
<div class="badge-block">
<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon">
<img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive">
</a>
</div>
<div class="badge-block">
<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon">
<img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive">
</a>
</div>
<div class="badge-block">
<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon">
<img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive">
</a>
</div>
<div class="badge-block">
<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon">
<img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive">
</a>
</div>
</div>【讨论】：
这让我很开心 :) @user10 太好了，如有任何问题，请随时回来询问。【参考方案2】：display: table-cell 是你的朋友。
.container
width:100%;
border:1px solid #333;
display: table;
.badge-block
display: table-cell;
.badge-block img
width:80%;
<div class="container">
<div class="badge-block">
<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a>
</div>
<div class="badge-block">
<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a>
</div>
<div class="badge-block">
<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a>
</div>
<div class="badge-block">
<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a>
</div>
</div>
<div class="container">
<div class="badge-block">
<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a>
</div>
<div class="badge-block">
<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a>
</div>
<div class="badge-block">
<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a>
</div>
</div>或者，如果您只需要支持现代浏览器，您可以使用 flexbox...
.container
width:100%;
border:1px solid #333;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
.badge-block img
width:80%;
<div class="container">
<div class="badge-block">
<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a>
</div>
<div class="badge-block">
<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a>
</div>
<div class="badge-block">
<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a>
</div>
<div class="badge-block">
<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a>
</div>
</div>
<div class="container">
<div class="badge-block">
<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a>
</div>
<div class="badge-block">
<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a>
</div>
<div class="badge-block">
<a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a>
</div>
</div>【讨论】：
支持 Flexbox 方式【参考方案3】：您可以在容器上使用display: table 和table-layout: fixed 来固定列中的相同宽度。
在您的 div（单元格）中，您可以应用 display: table-cell 并删除浮动。
像这样：
.container
display: table;
table-layout: fixed; // Fix all columns to same width
width:100%;
border:1px solid #333
.badge-block
display: table-cell;
width: 100%;
http://jsfiddle.net/2gqy9s9k/4/
【讨论】：
【参考方案4】：经典的方式是display: table-cell，但 Flexbox 绝对是未来。
使用Flexbox，您可以轻松实现这一目标，现在所有主流浏览器都支持它的第三个版本，即“标准”版本。
运行代码 sn-p 并向下滚动。
.container
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
.badge-block
margin: 0 auto;
.img-responsive
width: 100%;
<div class="container"><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div> <div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div> <div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div> <div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div> <div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div></div><div class="container"><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div></div><div class="container"><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div></div><div class="container"><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div></div><div class="container"><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div></div>不要错过Complete Guide to Flexbox，看看Flexy Boxes，这是一个惊人的工具，可以直观地创建带有前缀的 Flex 代码。
【讨论】：
以上是关于CSS+div自动调整宽度问题的主要内容，如果未能解决你的问题，请参考以下文章
CSS：如何调整使用浮动属性和自动宽度和高度的两个 div 在底部对齐