Question

我确信这必须是常见问题解答，但我还没有找到答案。

我在HTML页面上运行了一些带有一些文本的小图像。图像需要保留在其后面的单词中，但尽管在两者之间使用 或者甚至将它们直接放在一起，Firefox有时会在它们之间插入换行符。

我还应该承认，<img>被包装为<a>元素的内容，如果这会产生影响。

编辑 - 这是一个显示问题的测试文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
&middot; <a href="example.com"; onmouseover="return true"><img height="9" width="9" src="logo-break.gif" alt="pic" /></a>2UXX&nbsp;B:308-375
&middot; <a href="example.com"; onmouseover="return true"><img height="9" width="9" src="logo-break.gif" alt="pic" /></a>2V1D&nbsp;B:308-375
</body>
</html>

如果您显示该页面并慢慢使浏览器变窄，则在第二张图像后换行。没有css参与。

edit2 - 我在http://jsfiddle.net/487R7/发布了一个精简示例。该版本根本没有<a>元素，并且包含 个实体。摆弄结果框的宽度以查看症状。

Answer 1

<html>
<head><style>.container { width: 400px; }</style></head>
<body>
<div class="container">
<img src="http://lipsum.com/images/lipsum07.gif" style="float: right;" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur velit velit, cursus vitae consequat a, facilisis eu elit. In quis elit non enim semper dictum eget sagittis velit. Mauris nec lectus vitae mi faucibus rutrum non et nunc. Vestibulum ultrices suscipit blandit. Praesent faucibus sagittis arcu, nec convallis dui sodales sit amet. Aenean sapien metus, vestibulum a lacinia id, rhoncus vitae tellus. Fusce enim tortor, suscipit eu tincidunt eu, accumsan eu nulla. Nulla porttitor ullamcorper suscipit. Maecenas vel consectetur ipsum. Mauris blandit sapien et nulla ultrices a consequat nisi sagittis.</p>
</div>
</body>
</html>

Answer 2

好的，似乎有效的解决方案是在需要保存在一起的图像和文本周围添加<span>，然后在跨度上设置CSS：white-space:nowrap;

如何将img元素保留在文本旁边？

2 个答案: