Как верстать такие блоки?

Question

[papabig]

Есть макет, в макете есть такие блоки, ну я и встрял.

Comments

[Сергей delphinpro]

border-radius: 50%
float:left
margin-top: -40px;

Answer 1

[Flur]

Создаете прямоугольный блок с классом relative.

.parent {
   position:relative;
   width: 200px;
   height: 80px;
/*    Высота и ширина примерные   */
   padding: 10px
}

Далее в нем блок

.child {
   position:absolute;
   background-image: url (img.png);
   float: left;
   border-radius: 50%;
}

.parent p,
.parent h4{
   float: right;
}

Comments

[papabig]

Я не очень понимаю, как блоки собрать, если я делаю вот так, то весь текст просто накладывается на круглое изображение и флоатами не двигается.

<div class="parent">
        <div class="child">
                <h4>Мойка витражей и фасадов</h4>
                <p>Качественное выполнение работ от очистки витражей
                и фасадов от атмосферных и иных загрязнений</p>
                <button></button>
        </div> 
 </div>

[Иван]

papabig: Потому что весь текст и вместе с картинкой в одном блоке...Вы его флоатите и он двигается влево.

<div class="parent">
<div class="child"></div>
<h4>Мойка витражей и фасадов</h4>
                <p>Качественное выполнение работ от очистки витражей
                и фасадов от атмосферных и иных загрязнений</p>
                <button></button>
 </div>

Вот так вроде правильно будет :)