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

Question

我想在“左右角落”的“失落的100个筹码”对面放置“9月27日的比赛”。但我看不出它的位置在左下角。

这是我目前的CSS：

有什么建议？非常感激！

Answer 1

最简单的方法是将所有三个div（.recentEventsDetail，.recentEventsLowerLeftElement，.recentEventsLowerRightElement）与position: relative;包装在一个包装div中。然后，您可以制作较低的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的原点来计算位置。这里唯一的问题是你可能有重叠。您也可能想要添加填充底部到您的包装等于左侧和右侧div的高度。这确保它们从不重叠细节div。

Answer 2

您目前对于.recentEventsLowerLeftElement和.recentEventsLowerRightElement有哪些CSS？

要确保它们被清除到下一行，我会做类似如下：

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

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

.recentEventsLowerElement {明确：两者; }

.recentEventsLowerElement .recentEventsLowerLeftElement {0} {0} {0} float：left; }

.recentEventsLowerELement .recentEventsLowerRightElement {float：right; }