У меня есть один div в другом div. Внутренний div имеет поля 0, авто для его централизации. Однако я не могу заставить его плавать на дно, не делая его абсолютным. Есть ли способ сделать относительный div float на дне нормального div?
Поместите div в нижнюю часть другого div, не используя Absolute
Ответ 1
Без использования position: absolute
вам придется вертикально выровнять его.
Вы можете использовать vertical-align: bottom
, который, согласно документам:
Свойство CSS с вертикальным выравниванием указывает вертикальное выравнивание строки inline или table-cell.
Итак, либо установите внешний 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>
Ответ 2
В настоящее время вы можете просто использовать 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>
Ответ 3
Добавьте этот стиль в внутренний div.
position: relative;
top: 100%;
transform: translateY(-100%);
Ответ 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 внутри сдерживающего-div, если другая высота столбца больше.
Невероятно, что эта простая вещь не "встроена" через свойство css (т.е. "float: bottom" ), что не нарушает все остальное с абсолютами и т.д.
Ответ 5
Видеть это,
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
}
Ответ 6
Вы можете сделать это, установив для верхнего значения значение 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/