如何在不进行手动高度/边距计算的情况下将两个项目对齐到右侧？

Question

This fiddle证明了这个问题。

我正在尝试将图像和按钮对齐，在两条不同的线上，作为一个联合单位。我创建了一个包装器div（“right-stuff”），其位置为：relative，所以我可以在其子节点上使用position：absolute。

问题是我不知道在不影响高度计算的情况下将按钮对齐的好方法。

我所做的是给它position:absolute和right:0，但这会将其从流中移除，并导致容器（“右边的东西”）不包含它 - 看看红色背景如何没有达到它，虽然它“应该”。

另一个问题是“正确的东西”之后的流程中的下一个项目需要一个margin-top才能处于正确的位置，否则我必须给“right-stuff”一个我自己计算的宽度，或人为边缘（考虑按钮高度）。这里知识太多了。

是否有更好的方法让两个项目都作为一个连贯的单位，即“正确对齐”，但不会把事情从流程中解脱出来？

显然这不是第一次有人提出这个问题，但我没有在这里找到解决这些具体问题的答案而没有丑陋的黑客攻击（比如手动添加等于按钮高度的边距底部）。

编辑：text-align是一个不错的解决方案（比我想象的更好）。一个警告：它假定按钮确实是文本的，并且不适用于图像本身。这在我的例子中是可以的，因为图像是容器中最宽的东西 - 但是如果我在容器中有另一个比图像宽的元素呢？如何将图像保持对齐？

Answer 1

是的，因为这两个元素（img和button）都是inline-block，您只需使用text-align: right。

Answer 2

text-align有什么问题？

<div id="nContainer">
    <div id="nRight-stuff">
        <div id="nRight-img">
            <img src="http://sharecare.files.wordpress.com/2008/04/cute-animals-1.jpg?w=490" />
        </div>
        <button id="nRight-btn">A right aligned button</button>
    </div>
    <br style="clear: both" />
</div>

#nRight-stuff {
    float: right;
    text-align: right;
}

Fiddle

Answer 3

在http://jsfiddle.net/HXH5Z/4/

查看编辑小提琴

基本上我只是将按钮带回流中，但是将其包含在div中，将内容（text-align）对齐到右边。只需将text-align: right规则添加到#right-stuff div即可实现同样的效果，但我不知道您是否还希望图像在div内部对齐...