Есть родительский блок .products
, в котором расположено 3 блока .item
.
Как сделать высоту .item
равной высоте .products
, чтобы каждый .item
был одинаковой высоты. А затем сделать .description
одинаковой высоты через height: calc(100% - 228px);
HTML:
<div class="products">
<div class="item">
<div class="icon"></div>
<div class="title">Книги</div>
<div class="description">
<p></p>
</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="title">Вебинары</div>
<div class="description">
<p></p>
</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="title">Курсы</div>
<div class="description">
<p></p>
</div>
</div>
<div class="clear"></div>
</div>
CSS:
header .item {
float: left;
width: calc((100% - 40px)/3);
}
header .item:nth-child(2) {
margin: 0 20px;
}
header .item .icon {
margin: 0 0 15px 0;
height: 163px;
}
header .item:nth-child(1) .icon {
background: url(../images/header__product1_icon.png) center no-repeat;
}
header .item:nth-child(2) .icon {
background: url(../images/header__product2_icon.png) center no-repeat;
}
header .item:nth-child(3) .icon {
background: url(../images/header__product3_icon.png) center no-repeat;
}
header .item .title {
height: 50px;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
background: -webkit-linear-gradient(to right, #af5bfc, #859afa);
background: -moz-linear-gradient(to right, #af5bfc, #859afa);
background: -ms-linear-gradient(to right, #af5bfc, #859afa);
background: -o-linear-gradient(to right, #af5bfc, #859afa);
background: linear-gradient(to right, #af5bfc, #859afa);
font-weight: 700;
font-size: 23px;
line-height: 50px;
color: #fff;
text-transform: uppercase;
text-align: center;
}
header .item .description {
padding: 20px;
background: #fff;
}
header .item .description p {
padding: 0 0 6px 0;
font-size: 13px;
line-height: 17px;
color: #510f8d;
}
header .item .description p:last-child {
padding: 0;
}
!important
где попало, пусть инлайнит все стили в HTML файл, пусть пишет всё в одну строку, если хочет". Но если человек выкладывает код на StackOverflow, то в его же интересах сделать его понятнее и красивее. Не говорю уже о работе в команде, опенсорсе и т. д.