Разметка CSS/HTML

110

20 января 2021, 14:20

Есть круг, изображение и текст. Нужно разметить так, как на картинке. Оформление элементов не учитывать.

<div class="test">
<p><strong>Lorem<br>ipsum<br>dolor</strong></p>
<div id="circle"></div>
<img src="img/money.png" alt="Деньги">
</div>

Answer 1

Могу посоветовать вам Flex, вот пример с его использованием:

.content { 
    width: 450px; 
    padding: 15px; 
    display: flex; 
    justify-content: space-between; 
    text-align: right; 
} 
 
.circle { 
    height: 150px; 
    width: 150px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    border-radius: 50%; 
    background-color: grey; 
} 
 
.img { 
    height: 35px; 
} 
 
.text { 
    font-family: Arial, serif; 
    font-size: 28pt; 
}

<div class="content"> 
    <div class="circle"> 
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Stack_Overflow_logo.svg/1280px-Stack_Overflow_logo.svg.png" 
             alt="Деньги"> 
    </div> 
    <spam class="text"><strong>Lorem<br>ipsum<br>dolor</strong></spam> 
</div>