外层div自适应里面内容的宽度，div里面分为2边自适应中间固定，里面有多宽，外层div就有多宽
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了外层div自适应里面内容的宽度，div里面分为2边自适应中间固定，里面有多宽，外层div就有多宽相关的知识，希望对你有一定的参考价值。
<div class="box"><div class="l1">
<div class="l2">
4646546546546546565654
</div>
</div>
</div><style>
.boxtext-align: center
.l1display: inline-block;padding:0 30px;
</style>
外层div为l1，最外层套个盒子box，里边div为l2，l1的padding为l2两边自适应的宽度
参考技术A 既然外层div宽度要根据里面内容宽度来适应，那里面两边自适应又是根据什么来适应？如何让外层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里面分为2边自适应中间固定，里面有多宽，外层div就有多宽的主要内容，如果未能解决你的问题，请参考以下文章
如何使div中的图片自适应宽度和高度，图片不变形，可以超出div，超出部分隐藏