html,css - вёрстка

03 апреля 2022, 23:50

Доброе утро, на этот раз у меня вопрос касательно контейнеров и в какой последовательности они должны идти. А также не понимаю как сделать так, чтоб картинка (к примеру, где негр с телефоном) не выходила за пределы при уменьшении масштаба страницы?

Answer 1

Если надо пояснения - спрашивайте

Здесь с квадратиками : codepen.io/pen

.items { 
  display: flex; 
  width: 100%; 
  margin: auto; 
} 
 
.item { 
  width: 100%; 
} 
 
.item_flex { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
} 
 
.outer { 
  width: 60%; 
} 
 
img { 
  display: block; 
  width: 100%; 
  height: 100%; 
}

<div class="items"> 
  <div class="item"> 
    <img src="http://placehold.it/300" alt=""> 
  </div> 
  <div class="item item_flex"> 
    <div class="outer"> 
      <h2>lorem ipsum</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, dicta!</p> 
    </div> 
  </div> 
</div> 
<div class="items"> 
  <div class="item item_flex"> 
    <div class="outer"> 
      <h2>lorem shmipsum</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, dicta!</p> 
    </div> 
  </div> 
  <div class="item"> 
    <img src="http://placehold.it/300" alt=""> 
  </div> 
</div>

Answer 2

И снова флексы, зачем? Если можно это сделать с помощью inline-block.

Есть такая пословица:)

старый друг лучше новых двух

ps добавил еще один вариант

* { 
  margin: 0; 
  padding: 0; 
} 
 
.wrapper { 
  position: relative; 
  overflow: hidden; 
  width: 100%; 
} 
 
.wrp { 
  position: relative; 
  display: inline-block; 
  float: left; 
  width: 50%; 
  text-align: center; 
} 
 
img { 
  display: block; 
  max-width: 100%; 
} 
 
.kwad { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  margin-top: -40px; 
  margin-left: -40px; 
  width: 80px; 
  height: 80px; 
  background-color: chocolate; 
  text-align: center; 
  line-height: 60px; 
  font-size: 20px; 
} 
 
.kwad span { 
  display: block; 
  font-size: 10px; 
  line-height: 10px; 
  margin-top: -10px; 
}

<div class="wrapper"> 
  <div class="wrp"><img src="https://mtdata.ru/u22/photoDCC4/20414722554-0/original.jpg"></div> 
  <div class="wrp">Пушкин</div> 
  <div class="kwad">01<br><span>Пушкин</span></div> 
</div> 
<div class="wrapper"> 
  <div class="wrp">Пушкин</div> 
  <div class="wrp"><img src="https://cdn.cadelta.ru/media/articles/id5431/cover.jpg"></div> 
  <div class="kwad">01<br><span>Пушкин</span></div> 
</div>

Или таблицей:

* { 
  margin: 0; 
  padding: 0; 
} 
img { 
  display: block; 
  max-width: 100%; 
}

<table cellspacing="0" cellpadding="0" border="0" width="100%"> 
  <tr> 
    <td><img src="https://mtdata.ru/u22/photoDCC4/20414722554-0/original.jpg"></td> 
    <td>Пушкин</td> 
  </tr> 
    <tr> 
    <td>Пушкин</td> 
    <td><img src="https://cdn.cadelta.ru/media/articles/id5431/cover.jpg"></td> 
  </tr> 
</table>