Как лучше сверстать этот заголовок? [закрыт]

199

24 августа 2018, 06:00

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

Answer 1

Пример

* { 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
 
.container { 
  max-width: 1170px; 
  margin: 0 auto; 
  padding: 15px; 
} 
 
.block { 
  display: flex; 
  align-items: center; 
  position: relative; 
  margin-bottom: 25px; 
} 
 
.block__item { 
  width: 50%; 
  padding: 15px; 
} 
 
.block__img { 
  max-width: 100%; 
  width: 100%; 
} 
 
.block__number { 
  position: absolute; 
  top: 25%; 
  left: 50%; 
  font-size: 28px; 
  font-weight: 700; 
  z-index: 99; 
} 
 
.block__number>span { 
  color: #f00; 
} 
 
.block--reverse {} 
 
.block--reverse .block__item-content { 
  order: 2; 
} 
 
.block--reverse .block__item-pict { 
  order: 1; 
} 
 
.block--reverse .block__number { 
  left: auto; 
  right: 50%; 
} 
 
@media screen and (max-width: 576px) { 
  .block { 
    display: block; 
    text-align: center; 
  } 
  .block__item { 
    width: 100%; 
    padding: 5px 0; 
  } 
  .block__number, 
  .block--reverse .block__number { 
    position: relative; 
    top: 0; 
    left: 0; 
    right: 0; 
  } 
}

<div class="container"> 
 
  <div class="block"> 
    <div class="block__number">01<span>.</span></div> 
    <div class="block__item block__item-content"> 
      <p>На десктопе расположить не проблема. А вот что бы при уменьшении экрана, он сначала вместе с картинкой сдвигался, а потом вообще на новую строку, не получается.</p> 
    </div> 
    <div class="block__item block__item-pict"> 
      <img src="http://via.placeholder.com/200x200" class="block__img" alt=""> 
    </div> 
  </div> 
  <div class="block block--reverse"> 
    <div class="block__number">02<span>.</span></div> 
    <div class="block__item block__item-content"> 
      <p>На десктопе расположить не проблема. А вот что бы при уменьшении экрана, он сначала вместе с картинкой сдвигался, а потом вообще на новую строку, не получается.</p> 
    </div> 
    <div class="block__item block__item-pict"> 
      <img src="http://via.placeholder.com/200x200" class="block__img" alt=""> 
    </div> 
  </div> 
</div>

Answer 2

Примерно так Туц.

   <div class="wrapper">
  <div class="wrapper-item">
  <div class="h2">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex aut modi est voluptates beatae architecto numquam, exercitationem, voluptatem nulla ullam facilis, enim debitis quae fuga alias officiis dolores voluptate reiciendis.
  </div>
  <div class="img">
    <img src="http://dota.by/images/avatars//16882765904dd98d17c22fb.gif" width="100" height="100" alt="">
  </div>
    </div>
</div>
 .wrapper{
  margin:0 auto;
  padding:1rem 2rem;
  height: auto;
  display: table;
  outline:1px solid black;
}
.wrapper-item{
  position: relative;
  display: table-row;
}
.h2{
  display: inline-block;
  font-size: 1rem;
  margin-right:1rem;
  width:350px;
}
.h2:after{
  content:'01.';
  color:blue;
  border:1px solid blue;
  border-radius:50%;
  padding:.5rem 1rem;
  position: absolute;
  top:0;
  transform: translateY(50%);
  right:4.5rem;
}
.img{
   display: inline-block;
}
@media (max-width: 1000px) {
  .h2{
    margin:0;
  }
  .h2:after{
    content:none;
  }
  .h2:before{
  content:'01.';
  color:blue;
  border:1px solid blue;
  transform:none;
  border-radius:50%;
  position: relative;
  display:table;
  padding:.5rem 1rem;
  bottom:0;
  margin:0 auto 1rem auto;
}
  .img{
    display:table;
    margin:1rem auto 0rem auto;
    text-align: middle;
    position: relative;
  }
}

Размер экрана уже подбирайте сами и указывайте блокам как себя вести.

Но если поддержка старых версий браузеров не нужна- то тогда можно и на flex сделать ну или вообще на grid ( там вообще элементы можно как хочешь ставить и куда угодно).