如何实现左图右文div的响应式布局：文本先缩后换行

我明白你遇到的困扰了——明明想让文本先在设定的宽度范围内收缩，和图片一起保持并排，直到文本缩到最小宽度才换行，但现在文本一碰到图片就直接掉下去了。这个问题的核心是没有给文本容器设置合适的Flexbox属性，导致它不会主动收缩，而是直接触发换行。

下面是具体的解决方案，用Flexbox就能完美实现你想要的效果：

核心思路 #

给父容器设置弹性布局，同时控制文本容器的扩展、收缩优先级和宽度范围，让它优先收缩到最小宽度，之后再触发换行；同时让图片容器也能同步收缩，保持两者并排的状态。

完整代码示例 #

HTML结构 #

<div class="content-container">
  <div class="img-box">
    <img src="your-image-path.jpg" alt="示例图片">
  </div>
  <div class="text-box">
    这里是你的文本内容，可以是一段较长的描述，测试窗口缩小后的收缩效果，比如：Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
</div>

CSS样式 #

.content-container {
  display: flex;
  flex-wrap: wrap; /* 最后空间不足时允许换行 */
  gap: 1.5rem; /* 图片和文本之间的间距，比margin更灵活 */
  align-items: flex-start; /* 让顶部对齐，可选 */
}

.img-box {
  flex-shrink: 1; /* 允许图片容器随文本一起收缩 */
  min-width: 180px; /* 可选：给图片设置最小宽度，避免缩得过小影响观感 */
}

.img-box img {
  width: 100%;
  height: auto;
  object-fit: cover; /* 保持图片比例，防止拉伸变形 */
}

.text-box {
  /* 核心属性：flex-grow允许扩展，flex-shrink允许收缩，宽度在250px到650px之间 */
  flex: 1 1 clamp(250px, 55%, 650px);
  /* 如果需要兼容旧浏览器，可以替换成下面三行：
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 250px;
  max-width: 650px;
  */
}

关键细节解释 #

1. flex: 1 1 clamp(...)：这是实现效果的关键。flex-grow:1让文本容器在空间足够时占满剩余宽度；flex-shrink:1允许它在空间不足时收缩；clamp()函数定义了文本容器的宽度范围——优先以55%的容器宽度显示，最小不低于250px，最大不超过650px。当窗口缩小，文本容器会先收缩到250px，之后如果空间还是不够，flex-wrap:wrap才会触发，让文本换行到图片下方。
2. 图片容器的flex-shrink:1：保证图片会和文本一起收缩，而不是保持固定宽度挤压文本直接换行。如果不需要图片收缩，把这个值改成0即可，但这样文本会先收缩到最小宽度再换行。
3. gap属性：用来设置图片和文本之间的间距，比用margin更简洁，不会出现外边距折叠的问题。

这样调整后，就能完美实现你想要的“先收缩、后换行”的布局效果啦！

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