html,css - вёрстка

Question

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

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>

БЛОГ НА HUSL

html,css - вёрстка

Ответы (2 шт):