TailwindCSS框架中替换卡片图片为文本后div无法保持宽度问题

问题原因 #

你第一张调整后的卡片漏了2项核心配置，才会出现重叠、尺寸不稳定的问题：

1. 缺少md:flex布局声明：默认div为块级元素，会垂直排列，你写的两个w-1/2的div会各占整行宽度，自然出现错位重叠。你可以看下方官方示例的卡片，内层是套了md:flex类实现中等屏幕以上左右横向排列的。
2. 文本区域没沿用原图片容器的尺寸约束：原图片外层加了md:flex-shrink-0防止被挤压，图片本身定了md:w-48固定宽度、md:h-full撑满父容器高度，你替换的文本div没有这些规则，宽度自然会随内容、窗口缩放变化。

修正后代码 #

<div>
  <div class="max-w-md mx-auto bg-indigo-100 rounded-xl m-5 shadow-md overflow-hidden md:max-w-2xl">
    <!-- 加md:flex实现中等屏幕以上横向布局 -->
    <div class="md:flex">
      <!-- 左侧文本区域沿用原图片容器的尺寸规则 -->
      <div class="md:flex-shrink-0 md:w-48 h-48 md:h-full bg-gray-100 flex items-center justify-center">
        <p>Testing text</p>
      </div>
      <div class="p-8">
        <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">WELCOME</div>
        <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Rec</a>
        <p class="mt-2 text-gray-500">Testing text</p>
      </div>
    </div>
  </div>
</div>

调整说明 #

• 新增的md:flex类保证中等及以上屏幕下左右两部分横向排列，小屏幕下还是垂直堆叠，和官方示例的响应式逻辑完全一致
• 左侧文本区域加md:flex-shrink-0避免被右侧内容挤压变形，md:w-48 h-48 md:h-full和原图片区域的尺寸规则1:1对齐，窗口缩放时尺寸不会变
• 额外加的flex items-center justify-center是为了让文本在区域内居中展示，不需要可以直接删除

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