css 如何在未知宽度的 div 中相邻 float 或显示两个未知宽度的元素

Question

我有一个 img 和一个文本 block 需要彼此相邻显示。如果文本垂直延伸超出图像，则文本不应环绕在图像下方。 img 始终为 50px，但文本需要流动以适应容器的剩余宽度，随后将其设置为用户浏览器的宽度。我该怎么做？

本质上:

<div> <!--width is 100% of browser-->
<img/> <!--width is 48px-->
<p>Lorem Ipsum</p><!--width is unknown. Should show up next to img -->
</div>

Answer 1

您的包装 div 应该得到 overflow: hidden 或某种 clearfix。

img {
    float: left;
}

编辑:不要让文字位于图像下方:

p {
    margin-left: 48px;  
}

小例子:http://jsfiddle.net/AJkRu/3/