将<div>放在与图像</div>相同的行上

Question

我有一些HTML如下所示：http://jsfiddle.net/KbqHa/

我希望此div与图片位于同一行。但是，由于div是块元素，它会移动到下面的行。在这种情况下，我通常使用<span>，但这会完全弄乱边框（以及图像下的div包裹）。将display:inline-block添加到div似乎也不起作用。我尝试过使用float: left，但我也无法使用它。有什么想法吗？

Answer 1

经典解决方案是在float: left上使用img，然后将margin-left添加到等于图片宽度的div。

见：http://jsfiddle.net/thirtydot/KbqHa/2/

但是，如果图像的宽度未知，那就不好了。

因此，更好的解决方案是在overflow: hidden上使用div。

请参阅： http://jsfiddle.net/thirtydot/KbqHa/3/

这个看似荒谬的解决方案起作用的原因解释为here。