主页 / coding / 问题 / 78901589
Accepted
ParSa MnS
Asked: 2024-08-22 20:31:29 +0800 CST

Tailwindcss 中的图像对齐问题

  • 772

我正在尝试创建一个网站并将其用作tailwindcss其前端部分。（我在这篇文章中使用了库存图片）

在此处输入图片描述

正如您在上面看到的，我无法对齐这两张图像（第三张图像被推下，因为第二张图像在它的位置），在我添加之前，一切都很好，incline-block以便将Text图像放在正确的位置。

以下是本节的代码：

      <div class="relative ml-14 mt-2 inline-block">
        <img src="stockimage" alt="" class="float-left transition transform rounded-lg">
        <div class="absolute bottom-0 left-0 px-8 py-4 transition transform">
          <h1 class="text-white font-bold text-xl transition-transform transform hover:scale-105">Something</h1>
        </div>
      </div>
      <div class="relative mr-14 mt-2 inline-block">
        <img src="stockimage" alt="" class="float-right transition transform rounded-lg">
        <div class="absolute bottom-0 left-0 px-8 py-4 transition transform">
          <h1 class="text-white font-bold text-xl transition-transform transform hover:scale-105">Something</h1>
        </div>
      </div>
      <div class="relative mr-14 mt-2 inline-block">
        <img src="stockimage" alt="" class="float-right transition transform rounded-lg">
        <div class="absolute bottom-0 left-0 px-8 py-4 transition transform">
          <h1 class="text-white font-bold text-xl transition-transform transform hover:scale-105">Something</h1>
        </div>
      </div>

我尝试了一些替代方法，但没有得到任何结果，如能得到任何帮助我将非常感激。

我按照建议使用了网格 CSS，但是它并不不规则。 在此处输入图片描述

html

1 个回答

  1. Best Answer

    顺风游乐场

    使用 css 弹性框：

    <div class="ml-14 mr-14 mt-2 flex flex-row gap-4">
  <div class="relative inline-block">
    <img src="https://c7.alamy.com/compfr/pyeg09/jeune-femme-prend-des-photos-sur-une-rue-de-la-ville-pyeg09.jpg" alt="" class="float-left transform rounded-lg transition" />
    <div class="absolute bottom-0 left-0 transform px-8 py-4 transition">
      <h1 class="transform text-xl font-bold text-white transition-transform hover:scale-105">Something</h1>
    </div>
  </div>
  <div class="flex flex-col gap-4">
    <div class="relative inline-block flex-1">
      <img src="https://qodeinteractive.com/magazine/wp-content/uploads/2019/08/Featured-Stock.jpg" alt="" class="float-right h-full w-full transform rounded-lg object-cover transition" />
      <div class="absolute bottom-0 left-0 transform px-8 py-4 transition">
        <h1 class="transform text-xl font-bold text-white transition-transform hover:scale-105">Something</h1>
      </div>
    </div>
    <div class="relative inline-block flex-1">
      <img src="https://qodeinteractive.com/magazine/wp-content/uploads/2019/08/Featured-Stock.jpg" alt="" class="float-right h-full w-full transform rounded-lg object-cover transition" />
      <div class="absolute bottom-0 left-0 transform px-8 py-4 transition">
        <h1 class="transform text-xl font-bold text-white transition-transform hover:scale-105">Something</h1>
      </div>
    </div>
  </div>
</div>
    • 2

相关问题