图片响应式布局调整：页面缩小时图片居左而非居右

问题描述 #

页面缩放时，我需要图片移至文本下方并居左显示。当前图片设置了float: right，缩放后图片虽移到文本下方但仍保持居右；若改为float: left，图片和文本间距过近，加padding或margin又会导致图片提前下移，都不符合预期。

解决方案1：Flex布局（推荐） #

通过Flex容器实现响应式布局，大屏幕时文本和图片分栏，小屏幕时自动换行，图片居左。

修改后的HTML #

<div class="container">
  <section class="QuemSou">
    <h2>Quem Sou</h2>
    <p id="Quem_Sou">
      <b>Nome:</b> Francisco Costa<br>
      <b>Idade:</b> 19 anos<br>
      <b>Atividade:</b> Estudante<br>
      <b>Onde vivo:</b> Santa Maria da Feira
    </p>
  </section>

  <div class="divimgMAIN">
    <img id="imgMAIN" src="./images/linus.png">
  </div>
</div>

修改后的CSS #

/* 父容器设置Flex，实现弹性布局 */
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 5%;
}

/* 文本样式 */
section.QuemSou {
  flex: 1;
  min-width: 300px; /* 控制文本最小宽度，避免过度压缩 */
  overflow-wrap: break-word;
  font-size: 1.3em;
  margin-top: 40px;
  font-family: 'Century Gothic', sans-serif;
}

p#Quem_Sou {
  line-height: 30px;
}

/* 图片容器样式 */
div.divimgMAIN {
  margin-top: 40px;
  margin-bottom: 2%;
  margin-right: 5%;
}

img#imgMAIN {
  border: 2px solid black;
  padding: 5px;
}

/* 小屏幕适配：换行后图片居左 */
@media (max-width: 768px) {
  div.divimgMAIN {
    margin-right: 0;
    width: 100%;
  }
}

解决方案2：媒体查询调整Float属性 #

无需新增父容器，通过媒体查询在小屏幕时取消图片浮动，重置margin实现居左。

修改后的CSS #

/* 文本样式 */
section.QuemSou {
  float: left;
  overflow-wrap: break-word;
  font-size: 1.3em;
  margin-top: 40px;
  margin-left: 5%;
  font-family: 'Century Gothic', sans-serif;
  width: calc(100% - 5% - 300px); /* 预留图片宽度，避免提前换行 */
}

p#Quem_Sou {
  line-height: 30px;
}

/* 图片容器样式 */
div.divimgMAIN {
  float: right;
  margin-top: 40px;
  margin-right: 10%;
  margin-bottom: 2%;
  width: 280px; /* 固定图片容器宽度 */
}

img#imgMAIN {
  border: 2px solid black;
  padding: 5px;
  width: 100%; /* 图片自适应容器 */
}

/* 小屏幕适配：取消浮动，图片居左 */
@media (max-width: 900px) {
  section.QuemSou {
    float: none;
    width: 90%;
    margin-left: 5%;
  }
  div.divimgMAIN {
    float: none;
    margin-right: 0;
    margin-left: 5%;
    width: 90%;
  }
}

内容的提问来源于stack exchange，提问作者Kiko