изображение скользит вниз с тегом h3

Question

У меня есть изображение и тег h3 вместе, и они мне нужны рядом.

<img src="..." alt="..." /><h3>Shopping Cart</h3>

Но изображение скользит вниз.Как я могу решить эту проблему?

Answer 1

Если изображение связано с заголовком, тег IMG должен находиться внутри H3:

<code><h3><img ... /> Shopping Cart</h3>

После того, как вы это сделаете, вы можете настроитьвертикальное выравнивание изображения относительно базовой линии заголовка, используя что-то вроде:

h3 img {top:5px}

Другая идея состоит в том, чтобы полностью удалить IMG и дать H3 специальное имя класса, которое добавляет заполнение и показывает значок в видеизображение на заднем плане.Это хорошо, потому что изменить таблицу стилей легче, чем шаблон HTML, код короче и страница более доступна.

h3.shoppingcart {padding-left: 20px; background:url("cart.gif") center left no-repeat;}

Answer 2

плавающий 2 элемент float:left для img и float:right для тега h3

если не хватит места для h3, то он понижается. используйте display:inline-block вместо float попробуйте

<img src="..." style="float:left" alt="..." /><h3 style="float:right">Shopping Cart</h3>

Answer 3

display: inline для обоих будет работать лучше.Другое дело, что вы, вероятно, должны заключать их в div с фиксированной шириной (то есть: width: ___px) или минимальной шириной (то есть: min-width: ___px), чтобы вы всегда сохраняли достаточное горизонтальное пространство, чтобы они сидели рядом.боковая сторона.Независимо от того, какое решение вы используете, чтобы они сидели рядом друг с другом, если не хватает ширины и вы не сохраняете ширину, тогда они свернутся и сложатся вертикально.

Answer 4

float:left; используйте его на обоих или display:inline; лучше попробовать оба