最后一个字后的浮动图像

时间:2013-05-15 00:26:44

标签: css

我希望图像(评级星)始终浮动到标题和。 但是当标题为大(两行)时,图像位于下一行,而不是最后一个单词。

有没有办法在最后一个字的点后浮动图像?

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>

2 个答案:

答案 0 :(得分: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>

无需浮动图像标记。

答案 1 :(得分:1)

键设置h1标签显示为内联元素。您混淆了浏览器如何流动差异元素。浏览器在呈现块元素(如h1)时引入了换行符,因此您需要将标题显示为内联元素。

fiddle example

code fiddle