將文本對齊到上方文本的右側（與左側對齊）。寬度未知

Question

我試圖對齊一個口號文字標題標題的右側，而標題標題左對齊

兩個寬度是未知的，字體大小在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中完成嗎？或者我怎麼能做到這一點？

口號寬度：「相對」+文本對齊：正確或類似的東西？

Answer 1

如果額外的標記是可以接受的.. 。

DEMO

<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; 
} 

Answer 2

如果浮動離開了頭，它會收縮的div容器，並允許您使用的段落文本對齊：

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

jsFiddle example