如何使我的 div 随窗口/屏幕尺寸变化而换行？

Question

我知道如何包装物品（理论上），但我一定做错了什么。这些都是拒绝的。我只想要两个并排的配置文件，当窗口宽度缩小时，它们堆叠成一列。此刻，它们有点挤在一起并重叠。#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%;
}