Выровнять текст справа от верхнего текста (который выровнен по левому краю). Неизвестные ширины

#html #css

#HTML #css

Вопрос:

Я пытаюсь выровнять текст слогана справа от заголовка заголовка, в то время как заголовок заголовка выровнен по левому краю

Обе ширины неизвестны, а размер шрифта задан в em

 ---------------------------------------------------------
|THIS IS THE LARGE HEADER TITLE                         |
|                - small slogan                         |
|--------------------------------------------------------

<div id="header">
<h1>This is the large header title</h1>
<p>Small slogan here</p>
</div>
  

Можно ли это сделать в CSS, когда ширина не задана? Или как я могу этого добиться?

Ширина слогана: «относительная» выравнивание текста: по правому краю или что-то в этом роде?

Ответ №1:

Допустима ли дополнительная разметка…

ДЕМОНСТРАЦИЯ

 <div id="header">
    <div class="wrap">
        <h1>This is the large header title</h1>
        <p>Small slogan here</p>
    </div>
</div>
  

 .wrap {
    display: inline-block;
}
p {
    text-align: right;
}
  

Ответ №2:

Если вы переместите заголовок влево, это уменьшит контейнер div и позволит вам использовать выравнивание текста по абзацу:

 #header  {
    float:left;
}
#header p {
    text-align:right;
}
  

Пример jsFiddle