Как мне сделать обтекание моего div'а при изменении размера окна / экрана?

Question

Я знаю, как обернуть предметы (теоретически), но я, должно быть, делаю что-то не так. Они отказываются.

Я просто хочу, чтобы два профиля бок о бок складывались в столбец, когда ширина окна уменьшается. На данный момент они как бы вычисляются вместе sh и перекрываются.

#profile-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  padding-bottom: 5%;
}

.profile-desc {
  width: 35%;
  margin: 5% 5%;
  text-align: center;
}

#profileM {
  height: 230px;
  width: 219px;
}

#profileF {
  height: 230px;
  width: 219px;
}

<div id="profile-container">
  <div class="profile-desc" style="float:left;width:35%;padding: 5px;">
    <img src="images/male.jpg" id="profileM">
    <h3 style="color:white;background-color:rgb(244,212,69);">
      Name
    </h3>
    <h4 style="color: rgb(244,212,69);">
      Occupation
    </h4>
    <p>
      Description
    </p>
  </div>

  <div class="profile-desc" style="float:right;width:35%; padding: 5px;">
    <img src="images/female.jpg" id="profileF">
    <h3 style="color:white;background-color:rgb(244,212,69);">
      Name
    </h3>
    <h4 style="color: rgb(244,212,69);">
      Occupation
    </h4>
    <p>
      Description
    </p>
  </div>

</div>

Answer 1

Вы ищете CSS медиазапрос , он позволяет применять CSS, когда выполняются некоторые условия, касающиеся устройства (например, ширина или ориентация).

Я настроил ваш код, добавив строку медиазапроса (также я удалил некоторые ненужные свойства flex и удалил некоторые избыточные встроенные стили для .profile-desc)

#profile-container {
  padding-bottom: 5%;
}

.profile-desc {
  float: left;
  width: 35%;
  margin: 5% 5%;
  text-align: center;
}

#profileM {
  height: 230px;
  width: 219px;
}

#profileF {
  height: 230px;
  width: 219px;
}

@media(max-width: 580px) {
  .profile-desc {
    width: 100%;
    margin: 0;
  }
}

<div id="profile-container">
  <div class="profile-desc">
    <img src="images/male.jpg" id="profileM">
    <h3 style="color:white;background-color:rgb(244,212,69);">
      Name
    </h3>
    <h4 style="color: rgb(244,212,69);">
      Occupation
    </h4>
    <p>
      Description
    </p>
  </div>

  <div class="profile-desc">
    <img src="images/female.jpg" id="profileF">
    <h3 style="color:white;background-color:rgb(244,212,69);">
      Name
    </h3>
    <h4 style="color: rgb(244,212,69);">
      Occupation
    </h4>
    <p>
      Description
    </p>
  </div>

</div>

Answer 2

Вы можете избежать медиазапроса и рассчитывать на гибкость flexbox, сообщив ему размер контента. flex-basis: content достигает того же результата, но не поддерживается широко. Соответствующее изменение:

.profile-desc {
  flex-basis: 35%;
}