如何在Tailwind CSS中对齐文本与图片 固定起始位置实现两侧布局

问题核心原因 #

你现在的实现没有给图片容器、文本容器加上固定的宽度约束，也没有禁用flex元素的自动收缩特性：
默认flex布局下，子元素会根据内容长度自动调整宽度，文本内容变多就会挤压图片容器的宽度，反之图片如果尺寸变化也会挤压文本区域，自然就没法固定两侧的起始位置。

需要补充的配置 #

1. 外层flex容器要固定最大宽度和对齐方式，保证父容器本身位置不会变动，示例加w-full max-w-7xl mx-auto即可，可根据实际需求调整最大宽度值。
2. 给图片容器加固定宽度 + 禁止收缩配置：比如你要图片区域固定宽240px，就加w-[240px] flex-shrink-0，flex-shrink-0会强制容器不被其他元素挤压，宽度始终保持你设定的值。
3. 给文本容器加占满剩余空间的配置：加flex-1 min-w-0，flex-1会让文本容器自动占满图片之外的所有剩余宽度，min-w-0是避免文本过长时撑破容器布局。
4. 如果需要图片顶部和文本第一行顶部对齐，给外层flex容器加items-start，避免默认的拉伸对齐导致的位置偏移。

完整示例代码 #

<div class="flex w-full max-w-7xl mx-auto items-start gap-6">
  <!-- 固定宽度的图片容器 -->
  <div class="w-[240px] flex-shrink-0">
    <img src="你的图片地址" alt="描述文本" class="w-full h-auto rounded">
  </div>
  <!-- 自适应剩余宽度的文本容器 -->
  <div class="flex-1 min-w-0">
    <p>任意长度的文本内容，不会影响两侧起始位置</p>
  </div>
</div>

按照以上配置调整后，不管文本内容怎么增减，图片的左侧起始位置、文本的左侧起始位置都会固定不变。

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