将<div>与图像放在同一行上

Question

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

我想让这个div与图片在同一行。但是由于div是块级元素，它会移到下一行。通常情况下，我会使用<span>，但这会完全破坏边框（而且div也会在图片下面换行）。将display:inline-block添加到div中似乎也不起作用。我尝试使用float: left，但也无法实现。有什么想法吗？

- John Lyon

---

你的意思是什么，"to be on the same line"？ - Alessandro Pezzato

Answer 1

经典的解决方法是在 img 元素上使用 float: left，并将 div 元素的 margin-left 设置为图片的宽度。

参考：http://jsfiddle.net/thirtydot/KbqHa/2/ 然而，如果图片的宽度未知，则这种方法不可行。

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

参考：http://jsfiddle.net/thirtydot/KbqHa/3/ 这个看似毫无意义的解决方法之所以有效，原因在这里有详细说明：http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats。

- thirtydot