Question

我想使用CSS获得一个特定的布局，如下所示，我不确定它是否可行。 div内部有一些文本居中。在下面，还有另一个带有文字的div;我想要做的是右对齐此文本，使其右边缘与其上方文本的右边缘齐平。

使用CSS，我不知道如何做到这一点。显然，以下方法不起作用，因为子标题将右对齐容器。但是有什么技巧可以实现我想要的对齐吗？

~~＆lt; div style ='text-align：center;'＆gt;这是一些标题文字＆lt; / div＆gt;~~

~~＆lt; div style ='text-align：right;'＆gt;子标题文字＆lt; / div＆gt;~~

注意：强烈的偏好是直接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，以弥补副标题绝对定位所损失的高度。

HTML元素右对齐到兄弟中心元素的边缘

1 个答案: