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; }