CSS图文对齐异常：长文本换行掉落至图片下方的问题求解

你遇到的长文本自动掉到图片下方的布局效果如下：

出现这个现象的核心是两个写法问题：

• 包裹文本的容器用了display: inline-block但没设置宽度，这类元素默认宽度由内容撑开，当文本总长度超过父容器扣掉图片宽度后的剩余空间时，整个文本块就会被挤到下一行，视觉上和加了<br>标签效果一致
• 第二个商品模块混用了float和inline-block布局，还加了无意义的空标签清浮动，布局逻辑冲突，很容易出现不可预期的错位

直接用Flex弹性布局实现图文并排，代码简洁、维护性强，从根源上避免绕排、错位问题：

• 给每个商品卡片（.artigo元素）设置display: flex，用gap控制图片和文本的间距，align-items: flex-start实现图文顶部对齐
• 给文本容器设置flex: 1，让它自动占满图片之外的所有剩余宽度，不管文本多长都不会被挤到下一行
• 删掉所有内联的float、inline-block样式，去掉冗余的空div
• 如果需要实现图片在右侧的效果，只要给对应卡片加flex-direction: row-reverse即可，不用改其他样式

修正后完整代码 #

CSS 代码 #

.juices img {
  width: 250px;
  height: 250px;
}

.artigo {
  display: flex;
  gap: 20px; /* 图片和文本的间距，可按需调整数值 */
  align-items: flex-start;
  padding: 15px;
  border: 1px solid #eee; /* 对应原有border类的边框样式，可按需修改 */
  margin-bottom: 15px;
}

.artigo .content {
  flex: 1; /* 自动填充剩余宽度 */
}

.artigo h1 {
  font-size: 20px;
  margin: 0 0 10px 0;
}

.artigo p {
  margin: 0;
  line-height: 1.5;
}

HTML 代码 #

<div class="juices">
  <!-- 商品1：图片在左侧 -->
  <article class="border artigo">
    <img src="https://via.placeholder.com/200">
    <div class="content">
      <h1>WATERMELON BLISS</h1>
      <p>
        Sinta todo o frescor da melancia no seu vape! Com nossos liquidos especiais, feitos especialmente com flavorizantes extraidos em nossos laboratórios, você possui todo o sabor da fruta.
      </p>
    </div>
  </article>
  <!-- 商品2：图片在右侧 -->
  <article class="border artigo" style="flex-direction: row-reverse;">
    <img src="https://via.placeholder.com/200">
    <div class="content">
      <h1>STRAWBERRY WATERMELONADE</h1>
      <p>
        此处放置对应商品的描述文本即可，无论文本长度多少，都会固定在文本列渲染，不会绕排到图片下方。
      </p>
    </div>
  </article>
</div>

如果需要兼容IE10及以下的老旧浏览器，可以退回inline-block实现方案：给文本容器设置固定宽度（父容器总宽度减去图片宽度、边距宽度），同时给图片和文本容器都加vertical-align: top即可。目前Flex已经被所有主流浏览器原生支持，日常开发优先用Flex方案即可。

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