Позиция div в нижней части другого div, без использования Absolute

Question

У меня есть один div в другом div. Внутренний div имеет поля 0, авто для его централизации. Однако я не могу заставить его плавать на дно, не делая его абсолютным. Есть ли способ сделать относительный div float на дне нормального div?

Answer 1

Без использования position: absolute вам придется вертикально выровнять его.

Вы можете использовать vertical-align: bottom, которые, согласно the docs:

CSS-свойство вертикального выравнивания определяет вертикальное выравнивание инлайн или поле таблицы элементов.

Таким образом, либо установить внешний DIV в качестве встроенного элемента, или как table-cell:

#outer { 
 
    height: 200px; 
 
    width: 200px; 
 
    border: 1px solid red; 
 
    display: table-cell; 
 
    vertical-align: bottom; 
 
} 
 

 
#inner { 
 
    border: 1px solid green; 
 
    height: 50px; 
 
}

<div id="outer"> 
 
    <div id="inner"> 
 
    </div> 
 
</div>

Answer 2

Вы можете сделать это, установив к началу значения до 100%.

Html

<div class="outer"> 
<div class="inner"></div> 
</div> 

CSS

.outer {height:400px;width:400px;background:#eaeaea;} 
.inner {position:relative;top:100%;height:50px; width:50px; background:#fad400;} 

проверить эту скрипку здесь: http://jsfiddle.net/62wqufgk/

Answer 3

Добавить этот стиль к внутренним делам.

position: relative; 
top: 100%; 
transform: translateY(-100%); 

Answer 4

Единственный способ я нашел, если ваш контент не является статической высоты, должен был сделать это с JQuery, как так:

$(document).ready(function(){ 
    inner_height = $('#inner-div').height(); 
    outer_height = $('#outer-div').height(); 
    margin_calc = (outer_height - inner_height) 
    $('#inner-div').css('margin-top', (margin_calc+'px')); 
}); 

Это будет работать для колонного DIV в containing- div, если высота другого столбца больше.

Это невероятно это простая вещь, не «встроенная» через CSS-свойство (т.е. «Поплавок: снизу»), что не нарушает все остальное с абсолютами и т.д.

Answer 5

В настоящее время вы можете просто используйте display: flex для всех этих проблем выравнивания.

В вашем случае вы можете просто сделать родитель гибким, гибким направлением column (по умолчанию строка) и justify-content: flex-end. Преимущество этого подхода состоит в том, что он также работает, если у вас есть несколько элементов в родительском.

Если у вас есть несколько из них, и хотят иметь их все выровнены с самого начала родителя до конца, вы можете изменить justify-content к другому свойству, например, как space-between или space-evenly.

#outer { 
 
    height: 200px; 
 
    width: 200px; 
 
    border: 1px solid red; 
 
    display: flex; 
 
    justify-content: flex-end; 
 
    flex-direction: column; 
 
} 
 

 
#inner { 
 
    border: 1px solid green; 
 
    height: 50px; 
 
}

<div id="outer"> 
 
    <div id="inner"> 
 
    </div> 
 
</div>