如何让外层div自动适应内层div的高度和宽度
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何让外层div自动适应内层div的高度和宽度相关的知识，希望对你有一定的参考价值。
内层div如果不设置宽度的情况下会与外层div宽度一致，因为div是块级元素，默认是父容器的100%。
外层div如果不设置高度的话会与内层div高度保持一致，因为它会根据内容的多少自适应高度。
想让外层div自动适应内层div的高度和宽度
1）高度不需要设置，它会自适应
2）宽度可以给外层div加浮动或定位，加了之后内容有多宽，它就有多宽。或者是通过js获取内层元素的宽高然后给外层div加上即可。
参考技术A 用js获取内层宽度，然后赋值给外层即可。高度会自动自适应 参考技术B 清除浮动 在最后一个div 后面加上 这句话<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自动适应内层div的高度和宽度的主要内容，如果未能解决你的问题，请参考以下文章
如何使div中的图片自适应宽度和高度，图片不变形，可以超出div，超出部分隐藏
如何使div中的图片自适应宽度和高度，图片不变形，可以超出div，超出部分隐藏