對齊一個正確

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>和.e-author上設置display:flex和margin-left: auto。

下面是更新了自己的提琴： http://jsfiddle.net/dtqkm2sk/3/

佐伊Gillenwater有一個非常有見地的talk on CSS Flexbox覆蓋這和許多其他使用情況。