右对齐三个元素之一
Align one of three elements right
我的问题有点像这个:
不同之处在于我连续有 3 个元素(日期、标题、作者),我希望作者右对齐。
这里是 JSFiddle 的部分解决方案。
问题是,在我的 fiddle 中,作者是绝对定位的,因此在缩小 window 的同时,您会发现在某些时候标题会与作者重叠。
.e-author {
position: absolute;
right: 0;
}
TL;DR: 我可以在最右边对齐三个元素之一而无需浮动和/或额外的 html 元素吗?
您可以为此使用 Flexbox。
在 <li>
上设置 display:flex
,在 .e-author
上设置 margin-left: auto
。
这是对您的 fiddle 的更新:
http://jsfiddle.net/dtqkm2sk/3/
Zoe Gillenwater 的见解非常深刻 talk on CSS Flexbox,涵盖了这个用例和许多其他用例。
我的问题有点像这个:
不同之处在于我连续有 3 个元素(日期、标题、作者),我希望作者右对齐。
这里是 JSFiddle 的部分解决方案。 问题是,在我的 fiddle 中,作者是绝对定位的,因此在缩小 window 的同时,您会发现在某些时候标题会与作者重叠。
.e-author {
position: absolute;
right: 0;
}
TL;DR: 我可以在最右边对齐三个元素之一而无需浮动和/或额外的 html 元素吗?
您可以为此使用 Flexbox。
在 <li>
上设置 display:flex
,在 .e-author
上设置 margin-left: auto
。
这是对您的 fiddle 的更新: http://jsfiddle.net/dtqkm2sk/3/
Zoe Gillenwater 的见解非常深刻 talk on CSS Flexbox,涵盖了这个用例和许多其他用例。