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>

你可能想添加一些padding-bottom的div,以弥补由该子头是绝对定位丢失的高度.