如何用CSS实现4张图片横向无溢出均匀排列？

问题出在你用flex space-x-5搭配w-1/4时，space-x-5会给每张小图（除最后一个）添加右侧margin，4张图的总宽度是4*25% + 3*1.25rem，超出容器100%宽度导致溢出。以下是两种可行的解决方式：

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

Grid布局的gap直接从容器可用空间分配，不会触发溢出，是最简洁的解决方式：

<div key={index} class="w-full mt-10 mb-16 md:mt-0 md:absolute md:top-[50%] md:-translate-y-[50%] md:flex md:space-x-10 space-y-5 md:space-y-0 items-start">
  {/* Images */}
  <div class="w-full sm:w-4/5 md:w-1/2 mx-auto md:mx-0">
      <img src={row.image} alt="Product" class="w-full"> <!-- 给主图加w-full确保自适应容器 -->

      <div class="mt-4 w-full grid grid-cols-4 gap-5">
          <img src="../images/placeholder.svg" alt="Product" class="w-full object-cover">
          <img src="../images/placeholder.svg" alt="Product" class="w-full object-cover">
          <img src="../images/placeholder.svg" alt="Product" class="w-full object-cover">
          <img src="../images/placeholder.svg" alt="Product" class="w-full object-cover">
      </div>
  </div>
</div>

• grid grid-cols-4：将容器等分为4列
• gap-5：设置列间间距，和你原需求的space-x-5间距一致
• w-full object-cover：让图片填满所在列空间，同时保持比例避免变形

方案二：Flex布局调整 #

如果坚持用Flex，可利用flex-1让图片平分容器剩余空间，搭配gap设置间隙：

<div key={index} class="w-full mt-10 mb-16 md:mt-0 md:absolute md:top-[50%] md:-translate-y-[50%] md:flex md:space-x-10 space-y-5 md:space-y-0 items-start">
  {/* Images */}
  <div class="w-full sm:w-4/5 md:w-1/2 mx-auto md:mx-0">
      <img src={row.image} alt="Product" class="w-full">

      <div class="mt-4 w-full flex gap-5">
          <img src="../images/placeholder.svg" alt="Product" class="flex-1 object-cover">
          <img src="../images/placeholder.svg" alt="Product" class="flex-1 object-cover">
          <img src="../images/placeholder.svg" alt="Product" class="flex-1 object-cover">
          <img src="../images/placeholder.svg" alt="Product" class="flex-1 object-cover">
      </div>
  </div>
</div>

• flex gap-5：启用Flex布局并设置元素间间隙
• flex-1：让每张图平分容器扣除间隙后的剩余宽度

普通CSS方案 #

如果不用Tailwind，对应的原生CSS实现如下：

<div key={index} style="width:100%; margin-top:2.5rem; margin-bottom:4rem; @media(min-width:768px){margin-top:0; position:absolute; top:50%; transform:translateY(-50%); display:flex; gap:2.5rem;}">
  {/* Images */}
  <div style="width:100%; max-width:80%; margin:0 auto; @media(min-width:768px){max-width:50%; margin:0;}">
      <img src={row.image} alt="Product" style="width:100%;">

      <div style="margin-top:1rem; width:100%; display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem;">
          <img src="../images/placeholder.svg" alt="Product" style="width:100%; object-fit:cover;">
          <img src="../images/placeholder.svg" alt="Product" style="width:100%; object-fit:cover;">
          <img src="../images/placeholder.svg" alt="Product" style="width:100%; object-fit:cover;">
          <img src="../images/placeholder.svg" alt="Product" style="width:100%; object-fit:cover;">
      </div>
  </div>
</div>

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