Отобразить заголовок в строке со следующим абзацем

Учитывая следующую семантическую разметку:

<h3> SCOPE OF WORK. </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Я хотел бы отобразить заголовок рядом с абзацем, например итак:

ОБЪЕМ РАБОТ. Lorem ipsum dolor sit amet, consctetur adipisicing elit, sed сделать eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud упражнения ullamco labouris nisi ut aliquip ex ea Commodo Conquat.

Вариант 1: плавающий заголовок.

Это работает, пока заголовок умещается в одной строке. Когда этого не происходит, float формирует широкий блок, поэтому абзац начинается справа от блока или ниже, вместо того, чтобы продолжаться в строке:

| SCOPE OF | Lorem |
| WORK     | ipsum |
| sit amet, consect|

Вариант 2: отображать оба элемента встроенными.

Правило стиля, такое как: h3, h3 + * {display: inline;} может работать. Это предполагает, что им предшествуют и следуют другие элементы блока. В противном случае в них перетекли бы другие встроенные элементы. Кроме того, смежный селектор ( + ) доступен не во всех браузерах.

Вариант 3?

Без добавления ненужных классов или элементов оболочки и сохранения его действительного и семантического (нет диапазона .h3 внутри абзаца!), есть ли лучший способ сделать эту простую вещь?

9
задан Andrew Vit 29 September 2010 в 22:33
поделиться