Блог

Я использую тег img перед тегом h3, операторы break не используются. Но когда я запускаю его в браузере, он отображает 2 тега в отдельных строках. Существует ли метод CSS, который может исправить это, или, может быть, еще более простой атрибут тега, который заставит два элемента отображаться в одной строке?

Заранее спасибо!

——————————- редактировать ———————————————-

Ответы пока работают хорошо. Но этого еще нет. Если вы посмотрите на скриншот, вы увидите, что я хочу (я должен был указать в первую очередь, я знаю)…

Если я использую один из описанных выше методов, вы увидите, что тег h3 не находится в середине тега img. Я хочу, чтобы тег h3 плавал прямо в середине изображения..

Стиль тегов заголовка по умолчанию ( <h1> to <h6> ) содержит display: block . Присвоение вашему <h3> тегу стиля display: inline переопределит это поведение.

Два варианта:

1. Используйте line-height атрибут, для h3 которого равно вашему img . height

2. Используйте padding-top и padding-bottom для вашего h3 и играйте с ним, чтобы получить то, что вы хотите.

Вы имеете в виду исходный код или фактические элементы? Если вы имеете в виду фактические элементы, добавьте float: left; к ним оба, и они будут отображаться рядом.

Что, если вы поместите <img> тег внутри <h3> блока, например

 <h3><img src=".." /> Hello world!</h3>
  

При использовании HTML мы сталкиваемся с проблемой. Если мы используем <img> <h1> теги и , оба не будут находиться в одной строке. Есть одно решение для размещения их в одной строке — использовать img тег внутри h тега:

 <h2><img src="">Text here</h2>