Как выровнять sth в div внизу?

Question

Существует h1, p, a в div, я хочу h1 в верхней части div и a в нижней части div и p в середине независимо от высоты p.

jsfiddle

Вот источник:

HTML

<div class="box">  
    <div> 
    <h1>Header</h1> 
    <p>text <br>line2<br>line3</p> 
    <a href="#">bottom</a> 
    </div> 
    <div> 
    <h1>Header</h1> 
    <p>text <br>line2</p> 
    <a href="#">bottom</a> 
    </div> 
</div> 

CSS

.box { 
    box-sizing: border-box; 
    padding: 0 1px; 
    margin: 0; 
    overflow: hidden; 
    clear: both; 
    border: 1px solid blue; 
} 
.box div { 
    float: left; 
    width: 50%; 
    box-sizing: border-box; 
    padding: 10px; 
} 
.box h1 { 
    padding: 0; 
    margin: 0 0 10px; 
} 
.box p { 
    padding: 0; 
    margin-right:5px; 
    text-wrap:normal; 
} 
.box a { 
} 

Answer 1

Проверьте следующее решение работает для вас:

html, body{ 
 
    height:100%; 
 
} 
 
.box { 
 
    border: 1px solid blue; 
 
    box-sizing: border-box; 
 
    clear: both; 
 
    height: 100%; 
 
    margin: 0; 
 
    overflow: hidden; 
 
    padding: 0 1px; 
 
    position: relative; 
 
} 
 
.box div { 
 
    bottom: 0; 
 
    box-sizing: border-box; 
 
    display: inline-block; 
 
    height: 100%; 
 
    position: relative; 
 
    top: 0; 
 
    vertical-align: top; 
 
    width: 50%; 
 
} 
 
.box h1 { 
 
    margin: 0 0 10px; 
 
    padding: 0; 
 
} 
 
.box p { 
 
    margin-right: 5px; 
 
    padding: 0; 
 
} 
 
.box a { 
 
    bottom: 0; 
 
    position: absolute; 
 
}

<div class="box">  
 
    <div> 
 
     <h1>Header</h1> 
 
     <p>text <br>line2<br>line3</p> 
 
     <a href="#">bottom</a> 
 
    </div><div> 
 
     <h1>Header</h1> 
 
     <p>text <br>line2</p> 
 
     <a href="#">bottom</a> 
 
    </div> 
 
</div>

Проверка Fiddle.

Надеюсь, это поможет.

Answer 2

Лучший способ сделать это, чтобы добавить относительной для родительского div и абсолютный для детей вы хотите положить на дно.

.box { 
    box-sizing: border-box; 
    padding: 0 1px; 
    margin: 0; 
    overflow: hidden; 
    clear: both; 
    border: 1px solid blue; 
    position :relative; 
} 

a{ 
    position: absolute; 
    bottom: 0; 
} 

Теперь вы можете поставить все на нижней или на верхней части родительского DIV без проблем ...