放置< div>在图像的同一行 [英] Placing <div> on same line as image

问题描述

我有一些类似于以下内容的HTML： http://jsfiddle.net/KbqHa/

I have some HTML that looks like the following: http://jsfiddle.net/KbqHa/

我想这个 div 与图像在同一行。然而，它移动到下面的行，由于div是一个块元素。在这种情况下，我通常使用< span> ，但这完全混乱边框（和 div 在图像下包裹）。在 div 中添加 display：inline-block 似乎不起作用。我尝试使用 float：left 但我不能让它工作。任何想法？

I would like this div to be on the same line as the image. However, it moves to the line below due to the div being a block element. In this case I'd usually use a <span>, but this completely messes up the border (and the div wraps under the image too). Adding display:inline-block to the div doesn't seem to work either. I've tried using float: left but I can't get that to work either. Any thoughts?

推荐答案

经典的解决方案是使用 float：left 在 img 上，然后向 div margin-left $ c>等于图片的宽度。

The classic solution is to use float: left on the img, and then add a margin-left to the div equal to the width of the image.

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

但是，如果图片的宽度不够

However, that's no good if the width of the image is unknown.

所以，更好的解决方案是在上使用 overflow：hidden div 。

So, a better solution is to use overflow: hidden on the div.

查看： http://jsfiddle.net/thirtydot/KbqHa/3/

这个看似无意义的解决方案工作原因的解释是在这里。

The reason this seemingly nonsensical solution works is explained here.

这篇关于放置< div>在图像的同一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！