CSS定位 - 右下角左侧的元素

Question

我想在左下角定位“9月27日的比赛”，对面是“失去100筹码”。但是我无法看到它位于左下方。

这是我目前的CSS：

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

Answer 1

最简单的方法是将所有三个div（.recentEventsDetail，.recentEventsLowerLeftElement，.recentEventsLowerRightElement）放在包含div position: relative;的内部。然后你可以制作较低的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>

在包装器上使用position relative使绝对定位的子项使用该div的原点来计算位置。这里唯一的问题是你可能有重叠。你也可能想要在你的包装器中添加padding-bottom，等于左右div的高度。这确保它们永远不会与细节div重叠。

Answer 2

你目前对.recentEventsLowerLeftElement和.recentEventsLowerRightElement有什么css？

为确保将它们清除到下一行，我会执行以下操作：

<div class="recentEventsLowerElement">
    <div class="recentEventsLowerLeftElement">
    </div>

    <div class="recentEventsLowerRightElement">
    </div>  
</div><!-- end .recentEventsLowerElement -->

  

.recentEventsLowerElement {clear：both; }

     

.recentEventsLowerElement   .recentEventsLowerLeftElement {   向左飘浮; }

     

.recentEventsLowerELement   .recentEventsLowerRightElement {   漂浮：对; }