使用TailwindCSS无法设置行内图片及容器统一尺寸求助

问题核心在于：

• 卡片使用w-1/6百分比宽度，在横向滚动容器中会随容器宽度波动，且标题高度差异会导致卡片整体高度不一致
• 图片仅设置w-full未约束高度，不同比例的图片会撑大容器，破坏统一布局

按以下步骤修改即可解决：

1. 保留外层滚动容器核心属性 #

原有的flex overflow-y-hidden overflow-x-scroll无需改动，确保横向滚动、纵向禁止滚动的效果保留。

2. 重构单张电影卡片代码 #

给卡片设置固定尺寸、禁止收缩，用垂直flex布局统一内部元素，约束图片比例：

<div class="bg-white rounded-[10px] border-4 cursor-pointer m-5 flex-shrink-0 w-48 flex flex-col duration-500">
  <img 
    src="https://m.media-amazon.com/images/M/MV5BMWM5YzhmNGMtZTI4Ny00MGM4LThkYjAtMDIyMTEwNTQyZmQ1XkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UX182_CR0,0,182,268_AL_.jpg" 
    alt="movie poster" 
    class="rounded-t-[0.625rem] rounded-b-none w-full h-64 object-cover"
  />
  <div class="p-2 flex-grow">
    <h1 class="text-xl font-normal line-clamp-2">I am not okay with this</h1>
  </div>
</div>

关键修改说明： #

• w-48：给卡片设置固定宽度（可根据需求调整为w-52等），替代百分比宽度确保所有卡片宽度一致
• flex-shrink-0：禁止卡片在flex容器中被压缩，保证宽度稳定
• flex flex-col：让卡片内部元素垂直排列，便于统一高度分配
• h-64 object-cover：给图片设置固定高度，用object-cover裁剪图片填充容器，避免拉伸变形，保证图片尺寸统一
• line-clamp-2：限制标题最多显示2行（需确保Tailwind启用line-clamp插件），避免标题过长导致卡片高度不一致
• flex-grow：让标题容器自动填充卡片剩余空间，保证所有卡片底部对齐

3. 最终整体结构示例 #

外层容器保持原有结构，插入修改后的卡片即可：

<div class="container mx-auto">
  <div class="m-5">
    <h1 class="text-3xl m-2 pb-1 font-bold text-black">Action</h1>
    <div class="flex overflow-y-hidden overflow-x-scroll border-4">
      <!-- 修改后的卡片 -->
      <div class="bg-white rounded-[10px] border-4 cursor-pointer m-5 flex-shrink-0 w-48 flex flex-col duration-500">
        <img src="https://m.media-amazon.com/images/M/MV5BMWM5YzhmNGMtZTI4Ny00MGM4LThkYjAtMDIyMTEwNTQyZmQ1XkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UX182_CR0,0,182,268_AL_.jpg" alt="movie poster" class="rounded-t-[0.625rem] rounded-b-none w-full h-64 object-cover"/>
        <div class="p-2 flex-grow">
          <h1 class="text-xl font-normal line-clamp-2">I am not okay with this</h1>
        </div>
      </div>
      <!-- 其他卡片同理复制修改 -->
    </div>
  </div>
</div>

修改后所有卡片和图片尺寸会完全统一，同时保留横向滚动、纵向禁止滚动的效果，标题整齐排列在图片下方。

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