Всем хай. Есть блок комментария, он флексовый, в нем два блока, один под картинку, другой под текст. Картинка должна быть строго круглой 100x100px. Она получается овальной. Т.е. сжимается по ширине. Как это исправить? flex-basis дает такой же результат как и width.
Код SASS:
|
Код:
|
.item {
border: 2px dashed black;
flex-basis: 40%;
display: flex;
.comment_img {
background-color: green;
height: 100px;
width: 100px;
border-radius: 50%;
margin-right: 20px;
}
.text {
background-color: blue;
hr {
width: 40px;
margin-right: 100%;
border: 1px solid #f38181;
}
color: #fff;
}
} |
Код HTML:
<div class="item">
<div class="comment_img"></div>
<div class="text">
<span class="name">Mattew Dix</span>
<span class="descript">Graphic Design</span>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, dicta.</p>
</div>
</div>
