Flex布局图片+文本两列响应式适配问题求助

针对你遇到的三个布局问题，核心问题是Flex布局与float属性冲突，以及未正确利用flex的弹性比例和换行规则。以下是修正后的代码和关键说明：

修正后的CSS代码 #

.tv-wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 1.5rem; /* 可选：增加图片与文本的间距 */
}

.tv-image {
  flex: 1 1 300px; /* 弹性比例1，最小宽度300px */
  max-width: 33.33%; /* 空间充足时最大占容器1/3 */
}

.tv-image img {
  width: 100%; /* 图片自适应容器宽度 */
  height: auto;
  display: block; /* 去除图片底部默认间隙 */
}

.tv-details {
  flex: 2 1 300px; /* 弹性比例2，最小宽度300px */
}

dl {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0.8rem; /* 增加标签与内容的间距 */
}

dt {
  grid-column: 1;
  font-weight: 600;
}

dd {
  grid-column: 2;
  margin: 0; /* 清除dd默认外边距 */
  line-height: 1.5;
}

关键修改说明 #

1. 移除所有float属性：Flex布局下float完全无效，反而会干扰弹性布局的计算逻辑。
2. 用flex属性控制宽度比例：
   • .tv-image设置flex:1 1 300px：空间充足时占容器1/3（和.tv-details的flex:2形成1:2比例），容器宽度不足时，最小保持300px宽度，触发换行。
   • .tv-details设置flex:2 1 300px：空间充足时占2/3宽度，内容会自动在同行内换行；换行后会自动占满容器宽度。
3. 图片自适应处理：给图片设置width:100%，避免固定宽度导致容器溢出，同时保持比例。
4. 优化dl布局：增加gap和行高，提升可读性。

解决你的三个问题 #

• 问题1：文本现在会在同行剩余空间内自动换行，不会先撑宽再换行到图片下方。
• 问题2：只有当容器宽度小于300px + 300px = 600px时才会触发换行，避免窗口稍小就换行的问题。
• 问题3：移动端下文本换行后会自动占满容器100%宽度，不再局限于固定百分比。

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