html - 连续对齐 4 个图像而不溢出 CSS

Question

我正在尝试创建一行图像，并且我有一个使用页面宽度一半的容器，每个图像占用该一半的四分之一，如下所示:

<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"></img>

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

正如你所看到的，我上面有一张大图像和 4 个较小的图像，我想将它们对齐在下面。目前效果如下:

正如您所看到的，底部图像溢出到右侧列中。我不想溢出隐藏或添加滚动条，但相反，我希望图像在这个空间中尺寸均匀，之间有一个小间隙。就像这个例子:

正如您所看到的，没有溢出，并且 4 个图像大小均匀且在图像下方间隔开。这就是我想要复制的效果。我目前正在使用 Tailwind CSS，但如果有人不熟悉 Tailwind，常规的 CSS 解释就可以很好地工作。

根据我的理解，代码没有任何直接错误，因为每个图像确实占据了 1/4，但是，当我应用一些边距将它们分开时，图像可能会缩小，因为它们必须保持 1/4 宽度。然后，这会将图像推到一侧。我想要任何关于实现图二中的设计的清晰方法的建议。

Answer 1

您可以使用 Flexbox 来实现此目的。 确保父 div 具有以下属性:

display: inline-flex;
justify-content: space-evenly;

那么我相信你的 child /图像应该有这个属性来定义它的宽度:

flex-basis: 20%;

请访问此网站以获取快速 Flexbox 引用。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/