выровнять текст снизу в div с плавающей H1?

Question

У меня есть блок текста, и внутри блока у меня есть тег h1 с плавающей точкой слева. Я бы хотел, чтобы первая строка текста была выровнена с нижней частью первой строки текста.

Вот пример сайта:

http://myhealthsense.abyteshosting.com/

Рассматриваемый блок - это блок под заголовком, который говорит: «Добро пожаловать! Я ...»

Я хочу "Добро пожаловать!" чтобы он был выровнен по нижней части с остальной частью предложения, и чтобы следующая строка была обернута под «Добро пожаловать!». Как сейчас, справа от «Добро пожаловать!» Есть две строки.

Конечно, я мог бы сделать это легко, если бы весь текст был в одной строке, и я мог бы использовать интервалы для установки размеров. Но, поскольку все это создано из drupal, контент приходит как есть. Другими словами, текст в блоке поступает из базы данных и генерируется в div, но «welcome!» должен быть в шаблоне. Если я добавлю его в div содержимого, мой пользователь будет портить его каждый раз, когда редактирует содержимое.

Любые советы приветствуются.

Answer 1

<h1> семантически неверен для этого использования. <h1> - это семантический тег, используемый для обозначения заголовка статьи или основного раздела контента. В этом случае вы пытаетесь использовать тег <h1> для изменения представления текста, а не его цели. Для этого вам лучше использовать тег span и назначить стиль класса:

<p><span class="welcome">Welcome!</span> blah blah blahbitty blah</p>

Другая идея:

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

p:first-line 
{
    line-height: 1.5em;
}

Это может вызвать странное пространство в некоторых браузерах (я еще не пробовал).

Другая идея:

Вы можете добавить стиль с верхним отступом к элементу блока, который вы используете для своей основной области содержимого. Это предотвратит запуск текста, пока он не будет готов к запуску. Имейте в виду, что этот подход добавляет это заполнение к общему размеру элемента блока, поэтому блочный элемент с высотой 100 пикселей и верхним отступом 20 пикселей будет фактически равен 120 пикселям.

Answer 2

Вы можете поместить свой текст в <p></p> и указать display:inline; для h1 и p. IE:

<h1>Welcome!</h1><p>Mytext here</p>

Тогда поплавок не нужен.