Tailwind CSS桌面端图片分栏、移动端横向滚动布局问题

直接上能解决问题的代码，两种实现方式任选：

方案一：Grid布局（推荐） #

<div class="overflow-x-auto md:overflow-x-hidden">
  <div class="flex md:grid md:grid-cols-3">
    <img src="你的第一张图片地址" class="w-full md:col-span-1 object-cover" alt="横幅图1">
    <img src="你的第二张图片地址" class="w-full md:col-span-2 object-cover" alt="横幅图2">
  </div>
</div>

方案二：Flex布局 #

<div class="overflow-x-auto md:overflow-x-hidden">
  <div class="flex">
    <img src="你的第一张图片地址" class="w-full md:w-1/3 flex-shrink-0 object-cover" alt="横幅图1">
    <img src="你的第二张图片地址" class="w-full md:w-2/3 flex-shrink-0 object-cover" alt="横幅图2">
  </div>
</div>

你之前的问题根源： #

• 缺少移动端横向滚动容器：外层必须加overflow-x-auto，桌面端用md:overflow-x-hidden隐藏滚动条
• 默认布局未覆盖：直接用md:grid的话，移动端默认是block布局，不会横向排列，得给移动端加flex让图片横向排布
• 图片宽度处理错误：移动端图片要设w-full占满视口；Flex布局还要加flex-shrink-0防止图片被压缩，保证每张图都是全屏宽度
• Grid布局无需单独设w-1/3，用col-span-1/col-span-2配合grid-cols-3就能准确分配1/3和2/3的宽度

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