垂直对齐 – 如何在右侧对齐内嵌块元素？

正如你可以在下面的小提琴： http://jsfiddle.net/EvWc4/3/中看到的，我正在搜索一种方法来将第二个链接(link-alt)与父节点(p)的右侧对齐。

为什么不使用浮点数或位置：绝对你会说，主要原因是我喜欢链接的显示(内联块)属性允许它们以自然的方式垂直对齐。

使用float或position：absolute;我将被迫计算并放置一些额外的margin-top或top值来垂直对齐链接。

这是代码，但更好的看到小提琴http://jsfiddle.net/EvWc4/3/：

<p>
        <a href="#" class="link">link</a>
        <a href="#" class="link link-alt">link alt</a>
    </p>

    p {
       padding: 20px;
       background: #eee;
    }
    .link {
       display: inline-block;
       padding: 10px;
       background: #ddd;
    }
    .link-alt { padding: 20px; }

感谢提前！

解决方法

要使用CSS3，您可以使用弹性框模型

HTML：

<div class="content">
    <div class="Box Box1"><a>Link 1</a></div>
    <div class="Box Box2"></div>
    <div class="Box Box3"><a>Link 2</a></div>
</div>

CSS：

.content {
    display: Box;
    Box-orient: horizontal;
    Box-pack: center;
    Box-align: center;
}
.Box2 {
    Box-flex: 1;
}

(需要供应商前缀)

http://jsfiddle.net/EvWc4/18/