Разрыв между 2 строками в ячейке таблицы при вставке изображения - XHTML / CSS

Question

У меня есть таблица, созданная в XTMl, и у меня две строки в ячейке таблицы, например:

Firstname
Surname

В той же ячейке я хотел бы разместить изображение справа. Когда я вставляю это как <img> Я получаю разрыв между двумя строками, как это:

Firstname

Surname

Часто изображение помещается под вторую строку. Почему это происходит, и что я должен сделать, чтобы предотвратить это?

<td><strong>Name<br />Lastname<a href="google.com"><img src="images/1.gif" alt="img" /></a></strong></td>

Answer 1

В стиле изображения попробуйте добавить «float: right» к изображению.

Answer 2

Элемент image является элементом inline-block, что означает, что это блок, являющийся частью встроенного содержимого. Когда вы помещаете туда тег изображения, это часть второй строки текста. Вторая строка станет достаточно высокой, чтобы удержать высоту изображения, что приведет к расстоянию между текстами.

Вы можете извлечь изображение из встроенного содержимого, превратив его в блочный элемент, и поместить его вправо, поместив его.

Поместите тег image первым в ячейку и добавьте к нему стиль CSS float:right;. Сделав его плавающим элементом, вы также автоматически сделаете его блочным элементом.

Answer 3

Попробуйте добавить стиль CSS "white-space: nowrap;" к тд.