Нужна помощь с html и css

220

15 марта 2019, 07:50

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

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>

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

Answer 1

.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>

Answer 2

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

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

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Правильно составить post запрос

помогите составить правильно post-запрос на jsЕсть сайт, на который отправляется post запрос

187

Кастомизировать MenuItem WPF

При ховере на MenuItem он приобретает не совсем привлекательный видКак менять тот же Background при ховере что бы он не был таким? Вот как он выглядит...

168

Не получается из метода сделать Task<result>

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

148

Встроить в сборку pdb файл отладки

Я не думаю что сложно, моя цель сделать этот файл "портативным", или что-то в этом смысле, можно ли как то его встроить в выходной исполняемый...

144