Início / coding / Perguntas / 78901589
Accepted
ParSa MnS
Asked: 2024-08-22 20:31:29 +0800 CST

Problemas de alinhamento de imagem no Tailwindcss

  • 772

Estou tentando criar um site e usá-lo tailwindcsscomo parte do frontend. (Estou usando imagens de banco de imagens neste post)

insira a descrição da imagem aqui

E como você pode ver acima, não consigo alinhar as duas imagens, (a terceira imagem é empurrada para baixo porque a segunda está no lugar) está perfeitamente bem antes de adicionar incline-blockpara ter Textas imagens na posição correta .

aqui está o código para esta seção:

      <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>

Eu tentei alguns métodos alternativos, mas não consegui nenhum resultado com eles. Qualquer ajuda seria muito apreciada.

Usei grid css como foi sugerido, porém não é irregular. insira a descrição da imagem aqui

html

1 respostas

  1. Best Answer

    Parque infantil do vento favorável

    Usando css flexbox:

    <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

relate perguntas