CSS Позиционирование - элементы в правом нижнем левом углу, левый угол

Question

Я хочу позиционировать «Игра на 27 сентября» в нижнем левом углу, напротив «Lost 100 chips». Но я не вижу, чтобы он был расположен в нижней левой части.

Вот мой текущий CSS:

Любые предложения? Очень признателен!

Answer 1

Самый простой способ - разместить все три div (.recentEventsDetail, .recentEventsLowerLeftElement, .recentEventsLowerRightElement) внутри оберточного div с position: relative;. Затем вы можете сделать нижние divs 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

Какой css у вас в настоящее время имеется .recentEventsLowerLeftElement и .recentEventsLowerRightElement?

Для того, чтобы убедиться, что они будут очищены до следующей строки, я хотел бы сделать что-то вроде следующего:

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

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

.recentEventsLowerElement {ясно: как; }

.recentEventsLowerElement .recentEventsLowerLeftElement { float: left; }

.recentEventsLowerELement .recentEventsLowerRightElement { float: правый; }