HTML元素右對齊到同級居中元素的邊緣

Question

我想使用CSS獲取特定的布局，如下所示，但我不確定是否可行。 在居中的div內有一些文本。 在下面，還有另一個帶有文本的div； 我想做的是將此文本右對齊，以便其右邊緣與上方文本的右邊緣齊平。

使用CSS，我不知道如何執行此操作。 顯然，以下方法將不起作用，因為子標題將與容器右對齊。 但是，有什么技巧可以完成我想要的對齊嗎？

<div style ='text-align：center;'>這是一些標題文字</ div>

<div style ='text-align：right;'>子標題文本</ div>

注意：強烈建議使用純CSS（如果可能，則不要使用Javascript）。

注意＃2：我不拘泥於上述HTML。 我可以使用完成上述對齊方式的任何標記。

Answer 1

@thirtydot不，我對將完成對齊的任何HTML感到滿意。

然后嘗試以下方法： http : //jsfiddle.net/thirtydot/nU9Cj/

<div style='text-align: center'>
    <span style="position: relative">This is some headline text
        <span style='position: absolute; top: 100%; right: 0; font-weight: bold'>Sub-header text</span>    
    </span>
</div>

您可能想要在div添加一些padding-bottom ，以彌補子標題絕對定位所造成的高度損失。