CSS 定位——元素在右下角、左手 Angular

Question

我想将“Game on Sep 27”放在左下角，“Lost 100 chips”对面。但我看不到将它定位在左下角。

这是我当前的 CSS:

有什么建议吗？非常感谢!

Answer 1

最简单的方法是将所有三个 div(.recentEventsDetail、.recentEventsLowerLeftElement、.recentEventsLowerRightElement)放在 position: relative; 的包装 div 中。然后你可以制作较低的 div position: absolute; 并以这种方式设置位置。例如:

<style type="text/css">
  .reventEventsWrapper {position: relative;}
  .recentEventsLowerLeftElement {position: absolute; bottom: 0px; left: 0px;}
  .recentEventsLowerRightElement {position: absolute; bottom: 0px; right: 0px;}
</style>
<div class="reventEventsWrapper">
  <div class="recentEventsDetail"></div>
  <div class="recentEventsLowerLeftElement"></div>
  <div class="recentEventsLowerRightElement"></div>
</div>

在包装器上使用相对位置使绝对定位的子级使用该 div 的原点来计算位置。这里唯一的问题是你可能有重叠。此外，您可能还想将 padding-bottom 添加到包装器中，使其等于左右 div 的高度。这确保它们永远不会与细节部分重叠。