大div套多个小div，怎样设置外div的高度自适应？
<body>
<div style="width:580px; height:auto; margin:0 auto; background-color:#333">
<div style="height:100px; width:230px; float:left; background-color:#CCC; margin:20px"></div><div style="height:100px; width:230px; float:left; background-color:#CCC; margin:20px"></div><div style="height:100px; width:230px; float:left; background-color:#CCC; margin:20px"></div>
</div></body>
大概是这样子，我在大DIV里套了小div（数量不定），设置小div的float为left，并且设置了大div的固定宽度和背景色，但是在高度auto的情况下，完全不显示背景色，除非设置固定高度。
问题就是，如何设置，才能在小DIV列了1、2、3行时随行数变高？
在最后一个div 后面加上 overflow:hidden;如下：
<div style="width:580px; height:auto; margin:0 auto;
<div style="height:100px; width:230px; float:left; margin:20px"></div>
<div style="height:100px; width:230px; float:left; margin:20px"></div>
<div style="height:100px; width:230px; float:left; margin:20px"></div>
<div style="clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px;"></div>
</div>
扩展资料
DIV height与DIV自适应高度
1、在div标签内使用style属性即可设置此DIV盒子高度样式。
<div style="height:50px">我高度为50px</div>
解释：以上通过div标签的style属性样式设置height高度样式。
2、外部样式设置指定div盒子高度
此方法是常用的标签外部CSS样式设置对象样式法。可以通过将CSS代码写入CSS文件，再通过HTML引入CSS文件即可使用；也可以直接在HTML源代码内使用style标签设置CSS样式代码。
这里为大家演示html网页源代码内使用style标签设置外部CSS样式。
为了观察效果本div高度height实例，对象div命名为“.divcss5”，宽度为150px，height为80px，css边框为1px蓝色
DIV+CSS小例CSS代码：
<style>
.divcss5{ height:80px; width:150px; border:1px solid #00F}
</style>
<div style="clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px;"></div>
--------------------------------------------------------------------------------------------------------------------
<body>
<div style="width:580px; height:auto; margin:0 auto; background-color:#333">
<div style="height:100px; width:230px; float:left; background-color:#CCC; margin:20px"></div>
<div style="height:100px; width:230px; float:left; background-color:#CCC; margin:20px"></div>
<div style="height:100px; width:230px; float:left; background-color:#CCC; margin:20px"></div>
<div style="clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px;"></div>
</div>
</body>本回答被网友采纳
<div style="clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px;"></div>
--------------------------------------------------------------------------------------------------------------------
<body>
<div style="width:580px; height:auto; margin:0 auto; background-color:#333">
<div style="height:100px; width:230px; float:left; background-color:#CCC; margin:20px"></div>
<div style="height:100px; width:230px; float:left; background-color:#CCC; margin:20px"></div>
<div style="height:100px; width:230px; float:left; background-color:#CCC; margin:20px"></div>
<div style="clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px;"></div>
</div>
</body>
1、清除浮动 前面的兄弟已经说了
2、把大DIV也设置成浮动元素，float:left；（看问题中的代码是要居中，这个就不合适了）
3、给大的DIV加上属性overflow:hidden也可包裹住浮动元素
<div style="width:580px; margin:0 auto; background-color:#333;overflow:hidden;">
<div style="height:100px; width:230px; float:left; background-color:#CCC; margin:20px"></div>
<div style="height:100px; width:230px; float:left; background-color:#CCC; margin:20px"></div>
<div style="height:100px; width:230px; float:left; background-color:#CCC; margin:20px"></div>
<div style="heighT:0px;overflow:hiddne;clear:both;widtH:100%:"></div>
</div>
上面是第一种
<div style="width:580px; margin:0 auto; background-color:#333;overflow:hidden;padding-bottom:20px;">
<div style="height:100px; width:230px; float:left; background-color:#CCC; margin:20px"></div>
<div style="height:100px; width:230px; float:left; background-color:#CCC; margin:20px"></div>
<div style="height:100px; width:230px; float:left; background-color:#CCC; margin:20px"></div>
</div>
这样也是可以的
还有一种就是多嵌套一个div不漂浮的，这种比较多层，不喜欢用就不写了~本回答被提问者采纳
如何让div高度自适应
四种方法:1、增加一个清除浮动，让父容器知道高度；2、增加一个容器，在代码中存在，但在视觉中不可见；3、增加一个BR并设置样式为clear:both；4、设置一个足够高的高度，并在父级元素中清除溢出的部分。
div设置高度自适应?
大div套多个小div，怎样设置外div的高度自适应？在最后一个div后面加上?overflow:hidden;如下：divstyle="width:580px;height:auto;margin:0auto;divstyle="height:100px;width:230px;float:left;margin:20px"\/div divstyle="height:100px;width:230px;float:left;margin:20px"\/div divstyle="hei...
...四个小div 如何让他们自动分配间距,高度被设定的情况下。
利用CSS3 新添加的盒子模型属性 box-flex；可以让子容器针对父容器的宽度按一定规则进行划分。ie 目前不支持，估计后续版本会兼容这个属性。必须在父元素上面加上display:box; 才可以对子元素进行规则划分。box-flex:1;这里的 1 指的是比例 。如：<!DOCTYPE html><head> <title><\/title> <s...
里面的div怎么撑开外面的div让高度自适应
1、增加一个清除浮动，让父容器知道高度。请注意，清除浮动的容器中有一个空格。<div id="main"> <div id="content"><\/div> <div style="font: 0px\/0px sans-serif;clear: both;display: block"> <\/div> <\/div> 2、增加一个容器，在代码中存在，但在视觉中不可见。<div id="main">...
怎样让DIV自适应高度
第一种：一定高度内容加多时自适应高度，而内容少时DIV有一定最小高度；第二种：没有最小高度，DIV完全自适应高度。以下为大家介绍这两种情况与解决方法一定最小高度，内容加多时自适应高度，而内容少时DIV有一定最小高度 - TOP有一DIV盒子,默认高度为200px,当DIV里内容多余并超出限定高度时,DIV自适应...
如何让DIV随着其他DIV的高度增加而高度自动增长
div默认就是宽度最大化和高度最小化并且高度自动伸展的 父级div的高度可以随着子级div的高度增长而增长，这个最基本的情况你应该是清楚的 我想你问的问题应该是同级的div高度自适应，也就是比如平级的2个div高度自动伸展 这个效果我可以推荐你3个方法 1、使用table布局，2个平行的td高度是自动一样的 ...
css怎么使一个div的高随另一个div的高的变化而变化,还有就是怎么使第...
右边的div高度你可以用一点js和jquery来控制，比如你用$("#divLeft").css("height")来获取左边的高度，然后把这个值设给右边就可以实现实时变化了，因为我知道你这个forum的话是左边可能变化比较大，然后右边要随着左边的变化来适应，当然float也要设置为left；（此处要保证你的左div和右div的宽度之和...
div怎么样自动适应div的大小
<div style="float:left;"> <img src="" height="60px"\/> <\/div> <div> (这里有很多行文字，height超过60px)<\/div> <div style="clear:both;"><\/div> <\/div> 在最外层div标签结尾之前加一个空白的div 然后clear：both，就可以实现最外层div高度自适应了。这个没什么原因好解释的，就...
怎么让让DIV垂直方向自适应显示器高度
没有直接的办法，但可以采取曲线救国的办法。方法1：在内容层里面插入一个table。估计你也不想这样做。不过这个也是解决方法之一。方法2：设置DIV的min-height值，但是这个会有兼容性问题。方法3：利用JS判断外层DIV的高度，再调整DIV的高度。你可以试试，或者其他人有更好的办法。
怎么让div的高度自适应屏幕的高度
body ,html的高度都设置为100%；然后用百分比设置div高度，div高度百分比是按他父元素算的，所以他父元素设置有高度他的百分比高度才有效
