я бы хотел сделать так, чтобы:
1) 3 блока располагалось в ряд;
2) текст ссылки в каждом блоке был выравнен по низу;
3) весь блок является ссылкой.
Проблема: Когда я задаю ссылке display: block (c шириной и высотой блока), все разъезжается и в блоке остаются некликабельные места.
Если я оборачиваю ссылкой single_block, то :last-child{ margin-right: 0px;} перестает работать и получается отступ справа.
Я посмотрел как сделано на сайте "Запись к врачу" https://emias.info/. Там реализовано через display:grid. Когда сделал у себя на сайте - все заработало (блоки ровно стоят, кликабельны). При этом в Interner Explorer все ломается. Подскажите пожалуйста оптимальный способ решить проблему.
.wrap {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.single_block {
width: 246px;
height: 200px;
padding: 40px;
background-color: #DEF6E9;
border-radius: 6px;
float: left;
margin-bottom: 17px;
position: relative;
}
.number {
font-style: normal;
font-weight: 500;
font-size: 15px;
line-height: 18px;
color: #78B98F;
font-family: 'Montserrat', sans-serif;
}
.text {
position: absolute;
bottom: 0px;
padding: 0px 40px 40px 0px;
line-height: 20px;
font-style: normal;
font-weight: normal;
font-size: 17px;
font-family: 'Lora', serif;
color: #333333;
}
.single_block:hover {
background-color: #CCEDDB;
}
<div class="wrap">
<a href="#">
<div class="single_block">
<div class="number">01</div>
<div class="text">Психология в быту: советы</div>
</div>
</a>
<a href="#">
<div class="single_block">
<div class="number">02</div>
<div class="text">Тесты на счастье</div>
</div>
</a>
<a href="#">
<div class="single_block">
<div class="number">03</div>
<div class="text">Коммуникации</div>
</div>
</a>
</div>