如何使 div 宽度适合嵌套的内联图像？答案

【问题标题】：how to make div width fits nested inline images within?如何使 div 宽度适合嵌套的内联图像？
【发布时间】：2011-11-01 13:48:22
【问题描述】：

我在一个 div 中有几个内联图像我无法让 div 将其宽度调整为其内联图像我该怎么做？？

我已经尝试过制作父 div

display:inline-block、inline、float:left

但它们都不起作用....

html:

<div id="box1">
  <div id="box2">
    <img src="1.jpg">
    <img src="2.jpg">
    <img src="3.jpg">
  </div>
</div>

css:

#box1{
width:600px;
overflow:hidden;

} 

#box2{
display:inline-block;
}

#box2 img{
vertical-align:top;
display:inline;
}

【问题讨论】：

标签： html css

【解决方案1】：

float:left 应该可以工作 - 看我的小提琴：http://jsfiddle.net/VasXf/

注意：我在带有<br /> 的图像之间添加了换行符，这可能是您的问题？

【讨论】：

【解决方案2】：

你也需要你的图片到display: inline-block; :)

【讨论】：

【解决方案3】：

我可以解决此问题的唯一方法是像这样获取 box2：|

#box2{
white-space:nowrap;
}

如果有人有其他解决方案，请留言

【讨论】：