Как сохранить элемент img рядом с текстом?

Я уверен, что это должен быть FAQ, но я еще не нашел ответа.Как сохранить элемент img рядом с текстом?

У меня есть небольшое изображение, в котором есть текст с 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> и включает   объектов. Запишите ширину окна результатов, чтобы увидеть симптомы.

источник

2013-05-01 djh02

медийную: инлайн что ты ищешь? – Andre

Можете ли вы разместить свой код? – j08691

, так как FF иногда помещает разрыв строки между ними, вероятно, ширина контейнера недостаточно широка, чтобы он обертывался. Опубликуйте код – Huangism

<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>

источник

2013-05-01 16:22:31

ОК, решение, которое, кажется, работает, чтобы поставить <span> вокруг изображения и текста, которые должны быть вместе, а затем установить CSS на пролете говоря: white-space:nowrap;

источник

2013-05-02 13:39:03 djh02

Как сохранить элемент img рядом с текстом?

ответ

Смежные вопросы