右对齐三个元素之一

Question

我的问题有点像这样：CSS: alight left and right within the same line (without floats)
不同之处在于我连续有 3 个元素（日期、标题、作者），我希望作者正确对齐。

这是一个JSFiddle，其中包含部分解决方案。 问题是，在我的小提琴中，作者的位置是绝对的，所以在缩小窗口的同时，你会发现在某些时候标题会与作者重叠。

.e-author {
    position: absolute;
    right: 0;
}

TL;DR：我可以在没有浮动和/或其他 html 元素的情况下将三个元素之一对齐在最右边吗？

Answer 1

您可以为此使用 Flexbox。

在<li> 上设置display:flex，在.e-author 上设置margin-left: auto。

这是您的小提琴的更新： http://jsfiddle.net/dtqkm2sk/3/

Zoe Gillenwater 有一个非常有见地的 talk on CSS Flexbox，它涵盖了这个和许多其他用例。