CSS响应式布局：网页宽度过小时让introduction div换行到图片下方

安全阿岳

2026-9-30

解决方案

你需要对现有CSS做以下调整即可实现需求：

核心修改点

给.content容器添加flex-wrap: wrap属性，允许子元素在横向空间不足时自动换行
调整子元素排列顺序：给图片设置order: 2，给.introduction设置order: 1，实现宽屏时图片居右、文字居左的布局
为两个子元素设置弹性基础宽度，控制换行触发阈值
修正原有冗余属性，避免布局异常

完整修改后的CSS代码

.root {
  background-color: aliceblue;
  font-size: 62.5%;
}

.content {
  margin: auto;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  max-width: 80rem;
  gap: 2rem; /* 控制两个元素之间的间距 */
  padding: 2rem 1rem; /* 避免窄屏内容贴边 */
}

/* 新增图片专属样式 */
.content img {
  order: 2;
  flex: 0 1 300px; /* 宽屏最小宽度300px，不可放大、可缩小 */
  max-width: 100%;
  height: auto;
}

.introduction {
  order: 1;
  flex: 1 1 350px; /* 最小宽度350px，可放大缩小，总宽度小于650px时自动换行 */
  border-radius: 5px;
  font-family: 'Source Sans Pro', sans-serif;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  padding: 0.5rem;
  margin-top: 0; /* 移除原有的10rem上边距，间距统一通过.content的gap控制 */
}