Как разместить внутренний div в нижней части внешнего div без использования абсолютного положения в CSS

Question

Как разместить внутренний div в нижней части внешнего div без использования абсолютной позиции в CSS? Для ниже фрагмента кода только последний div должен быть выровнен снизу (другие три должны быть сверху, как есть)?

<div> 
<div id="wrapper" class="parent" style="height:600px; border: 1px solid red;"> 
<div style="border: 1px solid blue;">Fist</div> 
<div style="border: 1px solid blue;">Second</div> 
<div style="border: 1px solid blue;">Third</div> 
<div style="border: 1px solid blue;" class="child">Needs to be at bottom</div> 
</div> 
</div> 

Answer 1

Попробуйте это решение:

<div> 
<div id="wrapper" class="parent" style="height:600px; border: 1px solid red; position:relative;"> 
<div style="border: 1px solid blue;">Fist</div> 
<div style="border: 1px solid blue;">Second</div> 
<div style="border: 1px solid blue;">Third</div> 
<div style="border: 1px solid blue; position:absolute; bottom:0;" class="child">Needs to be at bottom</div> 
</div> 
</div> 

Должность: абсолютный в этом контексте позиции абсолютных внутри контейнера коробки - так что это не позиционирование абсолютного к документу или в окне браузера.

в действии с этой скрипкой: http://jsfiddle.net/fdxj1oue/

Answer 2

Вы можете использовать Flex-поле, он имеет хорошую поддержку в настоящее время во всех основных браузерах. http://caniuse.com/#search=Flex

Решение:

Внешний контейнер

#wrapper { 
Display: flex; 
Flex-direction: column; 
} 

Внутренний контейнер

.child { 
margin-top: auto; 
} 

это лучше использовать последний дочерний селектор псевдо всегда выбрать нижнюю DIV. проверьте это fiddle.