如何使我的 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&nbsp;{ &nbsp;&nbsp;flex-basis:&nbsp;35%; }