Иногда, при создании адаптивных сайтов, возникает необходимость придать адаптивности круглым блокам. С изображениями проблем, конечно же не возникает. Но блоки… Особенно, если внутри есть какой-то контент. А если вы не знаете сколько и какой контент будет внутри, то это становится настоящей головной болью. Обычно большинство прибегает к помощи javascript. Вычисляют ширину, присваивают высоту. Но на самом деле с помощью небольшого трюка можно легко сделать круги адаптивными на CSS. Сейчас я расскажу как.
Для начала рассмотрим html-структуру:
<div class="circle">
<p><span>Количество текста в кругах...</span></p>
</div>
<div class="circle">
<p><span>...мы не знаем.</span></p>
</div>
<div class="circle">
<p><span>Здесь может быть одно слово, а может быть целый параграф</span></p>
</div>
Что же нам нужно сделать? Оформим блоки стилями:
.circle{
border: 3px solid #000;
display: inline-block;
float: left;
width: 30%;
text-align: center;
border-radius: 100%;
background: #cecece;
max-width: 350px;
margin: 2%;
}
Теперь основное: дочернему элементу указываем высоту в ноль пикселей, а саму высоту формируем padding-ом:
.circle p{
display: block;
height: 0;
margin: 0;
padding: 50% 20%;
}
Последнее, что осталось, — выровнять контент:
.circle p span{
display: block;
transform: translateY(-50%);
}
Поделиться