1

Скриншот желаемого результата

Всем привет, нужна помощь в разрешение проблемы. Не понимаю как сделать так чтобы синий кружок становился на место, в котором он стоит на скриншоте. Но у меня выходит что-то не то. введите сюда описание изображения



body
{
	padding: 0;
	margin: 0;
	font-family: Arial;
	box-sizing: border-box;
}

.container
{
	margin: 0 auto;
	width: 1180px;
}

.header
{
	margin-top: 1572px;
	height: 424px;
	width: 100%;
	background-color: #f5f5f5;
}

.reviews
{
	padding-top: 50px;
	margin-left: 46.1%;
	color: #445161;
	font-size: 30px;
}

.cir1
{
	display: block;
	padding-top: 25px;
}

.cloud1
{

}

.cir2
{
	
}
<section>
		<div class="header">
			<div class="container">
				<div class="reviews">
					Reviews
				</div>

				<img src="images/circle.png" class="cir1">
				<img src="images/cloud.png" class="cloud1">
			</div>
		</div>
	</section>

Вот что выходит:

результат

3
  • код Вашей попытки приложите, пожалуйста. 28 окт 2018 в 23:40
  • '.cir1 { display: block; padding-top: 25px; }' 28 окт 2018 в 23:42
  • в теле вопроса и хотелось бы видеть не один класс, а верстку всего блока 28 окт 2018 в 23:44

2 ответа 2

2

.item {
  display: flex;
  align-items: center;
  width: 44%;
}

.circle {
  display: block;
  border-radius: 50%;
  margin-right: 20px;
}

.items {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 20px;
}
<div class="items">
  <div class="item">
    <img src="http://placehold.it/100" alt="" class="circle">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur aut nihil dignissimos libero quod.</p>

  </div>
  <div class="item">
    <img src="http://placehold.it/100" alt="" class="circle">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur aut nihil dignissimos libero quod.</p>

  </div>
  <div class="item">
    <img src="http://placehold.it/100" alt="" class="circle">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur aut nihil dignissimos libero quod.</p>

  </div>
  <div class="item">
    <img src="http://placehold.it/100" alt="" class="circle">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur aut nihil dignissimos libero quod.</p>

  </div>
</div>

1
  • Старайтесь, пожалуйста не только прикладывать код, но и пояснять в чем заключается идея Вашего решения, что не учел автор вопроса в своей попытке и т.д. Важно часто не столько само фактическое решение, сколько его объяснение. 28 окт 2018 в 23:59
1

Попробуйте задать кружку и облаку свойства display: inline-block

.cir1, .cloud1 {
  display: inline-block;
}

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.