浮动图像旁边的 CSS 最小标题 <h1, h2, h3> 宽度答案

【问题标题】：CSS minimum header <h1, h2, h3> width next to floated image浮动图像旁边的 CSS 最小标题 <h1, h2, h3> 宽度
【发布时间】：2014-02-17 11:03:43
【问题描述】：

如果有足够的空间，我的标题应该出现在浮动图像旁边，如果没有，则放在图像下方。我无权访问 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 { 内容: "";宽度：10em；显示：块；溢出：隐; }

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

【问题讨论】：

将图片和页眉浮动到同一个方向，然后在页眉中添加一个左边距？
我不知道图像浮动的方向，因为我无法提前看到 HTML，也不知道标题是否有关联的图像。
我可以在标题或图像中锚定的任何类？如果您能给我更多我可以使用的示例 HTML（以及其他所有人），那将有很大帮助。
不，我无法可靠地依赖任何东西。我认为这里有一个解决方案，使用媒体屏幕并检查图像是否占据屏幕宽度的一定百分比，如果是，则清除浮动以使整个标题下降。有意义吗？
您可能是指“媒体查询”，这些是浏览器遵循的设置规则，而不是“如果检查”，您可以告诉浏览器在屏幕宽度达到您预先设定的特定尺寸时设置一些 CSS 规则-定义。 developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

【解决方案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
}

【讨论】：