1

Как картинку во второй секции поменять местами с текстом?

.content-2 {
	flex-direction: column;
	display: flex;
	align-items: center;
	max-width: 1100px;
	margin: 0 auto;
}
.header-cont-text-2 {
	max-width: 650px;
	margin-right: 10px;
	margin-left: 10px;
	font-size: 28px;
	font-weight: 300;
	font-style: normal;
	color: #333333;
	line-height: 1.2em;
	letter-spacing: 0em;
	text-align: center;
	margin-bottom: 20px;
}
.content-wrap-2 {
	display: inline-flex;
}
.item2 {

}
.cont-text2 {
	margin-top: 10px;

	font-size: 16px;
	font-weight: 300;
	font-style: normal;
	color: #333333;
	line-height: 1.37em;
	letter-spacing: 0em;
	margin-left: 20px;
}
hr{
	border: none;
	background-color: #e2e2e2;
	color: #e2e2e2;
	height: 1px;
}
<section class="content-2">
	<div class="header-cont-text-2">В Ассортименте большой выбор оригинальных 
силиконовых и кожаных чехлов для iPhone</div>
	<div class="content-wrap-2">
		<div class="item2"><img src="http://51350.lp.tobiz.net/img/470x340/65497671fc1d5bd7d1cf35c553aa60a5.jpg" alt=""></div>
		<div class="cont-text2">
			<h2>Оригинальные кожанные чехлы для iPhone</h2>
			<hr>
			<p>Кожаные чехлы для iphone сделаны из кожи европейского производства особой обработки и спроектированны дизайнерами айфона. Они идеально сидят и смотрятся на айфонах. Ваш iPhone в этом чехле будет не только надежно защищен от внешнего воздействия, но и будет выглядеть так же тонко и стильно.</p>
		</div>
		<hr>
	</div>
	<div class="content-wrap-2">
		<div class="item2"><img src="http://51350.lp.tobiz.net/img/470x340/65497671fc1d5bd7d1cf35c553aa60a5.jpg" alt=""></div>
		<div class="cont-text2">
			<h2>Оригинальные кожанные чехлы для iPhone</h2>
			<hr>
			<p>Кожаные чехлы для iphone сделаны из кожи европейского производства особой обработки и спроектированны дизайнерами айфона. Они идеально сидят и смотрятся на айфонах. Ваш iPhone в этом чехле будет не только надежно защищен от внешнего воздействия, но и будет выглядеть так же тонко и стильно.</p>
		</div>
	</div>
</section>

1
  • Да, я учусь делать сайты, этот использую как макет. Вы довольно внимательны
    – Bogdan
    4 апр 2020 в 17:39

1 ответ 1

2

.content-2 {
  flex-direction: column;
  display: flex;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

.header-cont-text-2 {
  max-width: 650px;
  margin-right: 10px;
  margin-left: 10px;
  font-size: 28px;
  font-weight: 300;
  font-style: normal;
  color: #333333;
  line-height: 1.2em;
  letter-spacing: 0em;
  text-align: center;
  margin-bottom: 20px;
}

.content-wrap-1 {
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  display: flex;
}

.content-wrap-2 {
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  display: flex;
}

.item1 {}

.item2 {}

.cont-text2 {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 300;
  font-style: normal;
  color: #333333;
  line-height: 1.37em;
  letter-spacing: 0em;
  margin-left: 20px;
}

hr {
  border: none;
  background-color: #e2e2e2;
  color: #e2e2e2;
  height: 1px;
}
<section class="content-2">
  <div class="header-cont-text-2">В Ассортименте большой выбор оригинальных силиконовых и кожаных чехлов для iPhone</div>
  <div class="content-wrap-1">
    <div class="item1"><img src="http://51350.lp.tobiz.net/img/470x340/65497671fc1d5bd7d1cf35c553aa60a5.jpg" alt=""></div>
    <div class="cont-text1">
      <h2>Оригинальные кожанные чехлы для iPhone</h2>
      <hr>
      <p>Кожаные чехлы для iphone сделаны из кожи европейского производства особой обработки и спроектированны дизайнерами айфона. Они идеально сидят и смотрятся на айфонах. Ваш iPhone в этом чехле будет не только надежно защищен от внешнего воздействия,
        но и будет выглядеть так же тонко и стильно.</p>
    </div>
    <hr>
  </div>
  <div class="content-wrap-2">
    <div class="item2"><img src="http://51350.lp.tobiz.net/img/470x340/65497671fc1d5bd7d1cf35c553aa60a5.jpg" alt=""></div>
    <div class="cont-text2">
      <h2>Оригинальные кожанные чехлы для iPhone</h2>
      <hr>
      <p>Кожаные чехлы для iphone сделаны из кожи европейского производства особой обработки и спроектированны дизайнерами айфона. Они идеально сидят и смотрятся на айфонах. Ваш iPhone в этом чехле будет не только надежно защищен от внешнего воздействия,
        но и будет выглядеть так же тонко и стильно.</p>
    </div>
  </div>
</section>

0

Ваш ответ

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

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