Идея такая, есть блок-ссылка, там есть изображение-иконка, заголовок и текст-описание. Возможно ли разместить это так, как показано на скриншоте, желательно не пренебрегая
position: absolute;. Вот сам код:
div#main_content {
margin-top: 7%;
margin-left: 10%;
margin-right: 20%;
}
div.subblock {
margin-top: 2%;
margin-bottom: 2%;
}
div.downloadBlock {
display: inline-block;
background-color: rgba(0, 0, 0, 0.03);
border-radius: 10px;
padding: 3%;
transition: background-color 0.3s ease-out;
}
div.downloadBlock:hover {
background-color: rgba(0, 0, 0, 0.1);
}
img.icon {
display: inline-block;
width: 12%;
}
span.blockTitle {
display: inline-block;
font-family: "Raleway-Black";
font-size: 22px;
}
a.block {
display: inline-block;
text-decoration: none;
color: black;
}
<a class="block" href="https://8bgsg.ru/download?id=1">
<div class="downloadBlock">
<div>
<img class="icon" src="icons/fb2.png">
</div>
<div>
<span class="blockTitle">FB2</span>
</div>
</div>
</a>
</div>
</a>
Простой
Средний