float 图像旁边的 CSS 最小标题 <h1, h2, h3> 宽度

Question

如果有足够的空间，我的标题应该显示在 float 图片旁边，如果空间不够，则放在图片下方。我无权访问 HTML，因此我必须严格使用 CSS 来执行此操作。这是我收到的图像和标题 HTML 示例，以及它最终在 iPhone 上的样子，例如:

<p>
<img src="http://farm3.staticflickr.com2852/1232.jpg" style="height:265px; width:350px; float: right;"/>
</p>
<h3>THE HEADLINE</h3>

我已经在包装时解决了这个问题 <p>图像周围的内容使用以下技巧，在每个段落之前创建一个固定宽度的元素作为最小宽度:

p:before { content: ""; width: 10em; display: block; overflow: hidden; }

但是，这种方法不适用于标题。有什么想法吗？

Answer 1

这就是你要找的吗？ http://jsfiddle.net/zh4AV/1/

html:

<div id="container">
<img width="100" height="100"/>
<p>headline</p>
</div>

CSS:

#container{
    max-width:200px;
}
img{
    float:right
}