css - 最后一个单词后的浮动图像

Question

我希望图像（评级星）始终浮动到标题的和。但是当标题变大（两行）时，图像在下一行，而不是最后一个单词。

有没有办法在最后一个单词的点之后浮动图像？

http://jsfiddle.net/MJgU4/1/

<h1>This is short text</h1><span>float image</span>
<br /><br />
<h1>This is long text. This is long text. This is long text. This is long text. This is long text. This is long text. This is long text.This is long text.</h1><span>float image</span>

Answer 1

如果您希望图像直接显示在文本之后，您可以将其包含在<h1>标签中。这样它将内联显示。看到这个更新的 jsFiddle：

<div>
    <h1>This is short text<span>float image</span></h1>
</div>
<div>

<h1>This is long text. This is long text. 
      This is long text. This is long text. This is long text. 
      This is long text. This is long text.
      This is long text.<span>float image</span></h1>
</div>

无需浮动图像标签。

Answer 2

关键是设置 h1 标签显示为内联元素。您混淆了浏览器如何流动不同的元素。浏览器在渲染块元素（如 h1）时引入了换行符，因此您需要将标题显示为内联元素。

小提琴示例

code fiddle