html - 右对齐三个元素之一

Question

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

这是一个 JSFiddle与解决方案的一部分。问题是，在我的 fiddle 中，作者是绝对定位的，因此在缩小窗口的同时，您会发现标题有时会与作者重叠。

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

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

Answer 1

您可以为此使用 Flexbox。

设置display:flex在你的 <li>和一个 margin-left: auto在 .e-author 上.

这是对您的 fiddle 的更新: http://jsfiddle.net/dtqkm2sk/3/

佐伊·吉伦沃特 (Zoe Gillenwater) 很有见地 talk on CSS Flexbox其中涵盖了这个用例和许多其他用例。