时间戳

首页 > 解决方案 > 如何让我的 div 在窗口/屏幕大小更改时换行？

html - 如何让我的 div 在窗口/屏幕大小更改时换行？

问题描述

我知道如何包装物品（理论上），但我一定是做错了什么。这些都是拒绝的。

我只想要两个并排的配置文件，当窗口宽度缩小时，它们会堆叠成一列。此刻，它们有点挤在一起并重叠。

#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>

标签： htmlcss

解决方案

您正在寻找的是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>

推荐阅读