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 ，以弥补子标题绝对定位所造成的高度损失。