Вопрос с одной стороны простой, с другой не я не понимаю почему так происходит...
есть блок из 4 div'ов, стоящих в ряд. В каждом диве есть заголовок, изображение, описание и кнопка. заголовки имеют разную длину и соответственно в одном из блоков кнопка улетела вниз, соответственно чтобы это выглядело как минимум эстетично мне нужно ее прижать к низу... Помогите, пожалуйста, кто знает
HTML
<body>
<div class="wrapper">
<div class="row-4 clearfix">
<div class="col-1-4">
<h2>короткий заголовок</h2>
<div>Описание</div><br />
<div>КНОПКА</div>
</div>
<div class="col-1-4">
<h2>Ооооочень длинный заголовок, который нельзя укоротить </h2>
<div>Описание</div><br />
<div>КНОПКА</div>
</div>
<div class="col-1-4">
<h2>короткий заголовок</h2>
<div>Описание</div><br />
<div>КНОПКА</div>
</div>
<div class="col-1-4">
<h2>короткий заголовок</h2>
<div>Описание</div><br />
<div>КНОПКА</div>
</div>
</div>
</div><!-- /.wrapper -->
</body>
CSS
/* resets */
*,
*:before,
*:after {
box-sizing: border-box;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
/* global */
body {
background-color: rgb(40,40,40);
color: rgb(100,100,100);
font-family: sans-serif;
font-size: 14px;
line-height: 1.3;
}
.wrapper {
margin: 0 auto;
padding: 20px;
max-width: 95%;
background-color: #fff;
}
h2 {
font-weight: 700;
}
/* grid */
[class*="row-"] {
margin-bottom: 20px;
}
[class*="row-"]:last-child {
margin-bottom: 0;
}
[class*="col-"] {
}
@media all and ( min-width: 768px ) {
/* all cols margin */
[class*="col-"] {
margin-right: 20px;
}
[class*="col-"]:last-child {
margin-right: 0;
}
.col-1-4 {
float: left;
width: 25%;
}
.row-4 {
padding-left: 60px;
}
.row-4 [class*="col-"]:first-child {
margin-left: -60px;
}
}
