大div套多个小div，怎样设置外div的高度自适应？
<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不漂浮的，这种比较多层，不喜欢用就不写了~
