顺风垂直拉伸

问题描述 投票：0回答：3

我创建了一个包含多个项目的网格。 每个项目可以有不同的高度。在每个项目中，我想在底部对齐一个文本，但我做不到。

这是我使用的代码：

  <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 my-6 mx-6">

            <a href="{{ route('recipe.show', $recipe) }}" class="rounded-xl bg-white p-3 shadow-lg hover:shadow-xl">
                <div class="relative flex items-end overflow-hidden rounded-xl">
                    <img
                        src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Volleyball_block.jpg/440px-Volleyball_block.jpg" />
                </div>

                <div class="mt-1 p-2">
                    <h2 class="text-slate-700">Il muro può essere eseguito da uno o più giocatori (muro collettivo)</h2>

                    <div class="mt-3 flex items-end justify-between">
                        <p class="group inline-flex">
                            <span class="text-slate-400 text-lg pr-2">
                                <i class="far fa-heart"></i>
                            </span>
                            <span class="text-lg font-bold text-orange-500 mr-3">4</span>
                        </p>
                        <p class="group inline-flex">
                            <span class="text-lg font-bold text-orange-500 pr-2">4</span>
                            <span class="text-slate-400 text-lg">
                                <i class="far fa-heart"></i>
                            </span>
                        </p>
                    </div>
                </div>
            </a>

            <a href="{{ route('recipe.show', $recipe) }}" class="rounded-xl bg-white p-3 shadow-lg hover:shadow-xl">
                <div class="relative flex items-end overflow-hidden rounded-xl">
                    <img
                        src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Volleyball_block.jpg/440px-Volleyball_block.jpg" />
                </div>

                <div class="mt-1 p-2">
                    <h2 class="text-slate-700">Il muro</h2>

                    <div class="mt-3 flex items-end justify-between">
                        <p class="group inline-flex">
                            <span class="text-slate-400 text-lg pr-2">
                                <i class="far fa-heart"></i>
                            </span>
                            <span class="text-lg font-bold text-orange-500 mr-3">4</span>
                        </p>
                        <p class="group inline-flex">
                            <span class="text-lg font-bold text-orange-500 pr-2">4</span>
                            <span class="text-slate-400 text-lg">
                                <i class="far fa-heart"></i>
                            </span>
                        </p>
                    </div>
                </div>
            </a>

            <a href="{{ route('recipe.show', $recipe) }}" class="rounded-xl bg-white p-3 shadow-lg hover:shadow-xl">
                <div class="relative flex items-end overflow-hidden rounded-xl">
                    <img
                        src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Volleyball_block.jpg/440px-Volleyball_block.jpg" />
                </div>

                <div class="mt-1 p-2">
                    <h2 class="text-slate-700">Il muro può essere eseguito da uno o più giocatori. Il muro può essere eseguito da uno o più giocatori.</h2>

                    <div class="mt-3 flex items-end justify-between">
                        <p class="group inline-flex">
                            <span class="text-slate-400 text-lg pr-2">
                                <i class="far fa-heart"></i>
                            </span>
                            <span class="text-lg font-bold text-orange-500 mr-3">4</span>
                        </p>
                        <p class="group inline-flex">
                            <span class="text-lg font-bold text-orange-500 pr-2">4</span>
                            <span class="text-slate-400 text-lg">
                                <i class="far fa-heart"></i>
                            </span>
                        </p>
                    </div>
                </div>
            </a>



        </div>

这是结果： result

我想在每个项目中，最后一行在底部对齐。

你能告诉我我哪里错了吗？ 谢谢

css grid tailwind-css
3个回答
0
投票

你可以在卡片上使用网格。给卡片两行：顶部的图像仅与其内容一样大，其余部分是卡片的文本部分。

<a href="{{ route('recipe.show', $recipe) }}" class="grid grid-rows-[min-content_1fr] rounded-xl bg-white p-3 shadow-lg hover:shadow-xl">

然后你可以设置文本部分可以设置为在列方向上弯曲。使用

justify-content: space-between
（
justify-between
Tailwind 类）会将“喜欢”推到卡片底部：

<div class="mt-1 p-2 flex flex-col justify-between">...</div>

可选地，您可以使用 

aspect-ratio
和 
object-fit
使所有图像大小相同：

<div class="overflow-hidden rounded-xl">
  <img src="https://picsum.photos/id/237/600" class="aspect-[4/3] h-full w-full object-cover" />
</div>

工作片段

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha512-q3eWabyZPc1XTCmF+8/LuE1ozpg5xxn7iO89yfSOd5/oKvyqLngoNGsx8jq92Y8eXJ/IRxQbEC+FGSYxtk2oiw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>


<div class="grid grid-cols-1 gap-6 m-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
  <a href="{{ route('recipe.show', $recipe) }}" class="grid grid-rows-[min-content_1fr] rounded-xl bg-white p-3 shadow-lg hover:shadow-xl">
    <div class="overflow-hidden rounded-xl">
      <img src="https://picsum.photos/id/237/600" class="aspect-[4/3] h-full w-full object-cover" />
    </div>
    <div class="mt-1 p-2 flex flex-col justify-between">
      <h2 class="text-slate-700">Il muro può essere eseguito da uno o più giocatori (muro collettivo)</h2>
      <div class="mt-3 flex items-end justify-between">
        <p class="group inline-flex">
          <span class="text-slate-400 text-lg pr-2">
            <i class="far fa-heart"></i>
          </span>
          <span class="text-lg font-bold text-orange-500 mr-3">400</span>
        </p>
        <p class="group inline-flex">
          <span class="text-lg font-bold text-orange-500 pr-2">54</span>
          <span class="text-slate-400 text-lg">
            <i class="fa fa-retweet" aria-hidden="true"></i>
          </span>
        </p>
      </div>
    </div>
  </a>
  <a href="{{ route('recipe.show', $recipe) }}" class="grid grid-rows-[min-content_1fr] rounded-xl bg-white p-3 shadow-lg hover:shadow-xl">
    <div class="overflow-hidden rounded-xl">
      <img src="https://picsum.photos/id/128/600" class="aspect-[4/3] h-full w-full" />
    </div>
    <div class="mt-1 p-2 flex flex-col justify-between">
      <h2 class="text-slate-700">Il muro</h2>
      <div class="mt-3 flex items-end justify-between">
        <p class="group inline-flex">
          <span class="text-slate-400 text-lg pr-2">
            <i class="far fa-heart"></i>
          </span>
          <span class="text-lg font-bold text-orange-500 mr-3">92</span>
        </p>
        <p class="group inline-flex">
          <span class="text-lg font-bold text-orange-500 pr-2">12</span>
          <span class="text-slate-400 text-lg">
            <i class="fa fa-retweet" aria-hidden="true"></i>
          </span>
        </p>
      </div>
    </div>
  </a>
  <a href="{{ route('recipe.show', $recipe) }}" class="grid grid-rows-[min-content_1fr] rounded-xl bg-white p-3 shadow-lg hover:shadow-xl">
    <div class="overflow-hidden rounded-xl">
      <img src="https://picsum.photos/id/6/600" class="aspect-[4/3] h-full w-full" />
    </div>
    <div class="mt-1 p-2 flex flex-col justify-between">
      <h2 class="text-slate-700">Il muro può essere eseguito da uno o più giocatori. Il muro può essere eseguito da uno o più giocatori.</h2>
      <div class="mt-3 flex items-end justify-between">
        <p class="group inline-flex">
          <span class="text-slate-400 text-lg pr-2">
            <i class="far fa-heart"></i>
          </span>
          <span class="text-lg font-bold text-orange-500 mr-3">2.7K</span>
        </p>
        <p class="group inline-flex">
          <span class="text-lg font-bold text-orange-500 pr-2">4</span>
          <span class="text-slate-400 text-lg">
            <i class="fa fa-retweet" aria-hidden="true"></i>
          </span>
        </p>
      </div>
    </div>
  </a>
</div>

0
投票

你需要玩

flex
flex-1
跨元素。

顺风游戏

遵循的结构

<a class = "flex flex-col"
  <img class=""/>
  <div class="flex-1 flex flex-col">
     <h1 class = "flex-1">
     <div>
  </div>
</a>

输出： 

<div class="my-6 mx-6 grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
  <a href="{{ route('recipe.show', $recipe) }}" class="flex flex-col rounded-xl bg-white p-3 shadow-lg hover:shadow-xl">
    <div class="rounded-xl">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Volleyball_block.jpg/440px-Volleyball_block.jpg" />
    </div>

    <div class="mt-1 flex flex-1 flex-col p-2">
      <h2 class="flex-1 text-slate-700">Il muro può essere eseguito da uno o più giocatori (muro collettivo) l muro può essere eseguito da uno o più giocatori (muro collettivo)l muro può essere eseguito da uno o più giocatori (muro collettivo)l muro può essere eseguito da uno o più giocatori (muro collettivo)</h2>

      <div class="mt-3 flex items-end justify-between">
        <p class="group inline-flex">
          <span class="pr-2 text-lg text-slate-400">
            <i class="far fa-heart"></i>
          </span>
          <span class="mr-3 text-lg font-bold text-orange-500">4</span>
        </p>
        <p class="group inline-flex">
          <span class="pr-2 text-lg font-bold text-orange-500">4</span>
          <span class="text-lg text-slate-400">
            <i class="far fa-heart"></i>
          </span>
        </p>
      </div>
    </div>
  </a>

  <a href="{{ route('recipe.show', $recipe) }}" class="flex flex-col rounded-xl bg-white p-3 shadow-lg hover:shadow-xl">
    <div class="relative flex items-end overflow-hidden rounded-xl">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Volleyball_block.jpg/440px-Volleyball_block.jpg" />
    </div>

    <div class="h-f mt-1 flex flex-1 flex-col p-2">
      <h2 class="flex-1 text-slate-700">Il muro</h2>

      <div class="mt-3 flex items-end justify-between">
        <p class="group inline-flex">
          <span class="pr-2 text-lg text-slate-400">
            <i class="far fa-heart"></i>
          </span>
          <span class="mr-3 text-lg font-bold text-orange-500">4</span>
        </p>
        <p class="group inline-flex">
          <span class="pr-2 text-lg font-bold text-orange-500">4</span>
          <span class="text-lg text-slate-400">
            <i class="far fa-heart"></i>
          </span>
        </p>
      </div>
    </div>
  </a>

  <a href="{{ route('recipe.show', $recipe) }}" class="flex flex-col rounded-xl bg-white p-3 shadow-lg hover:shadow-xl">
    <div class="relative flex items-end overflow-hidden rounded-xl">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Volleyball_block.jpg/440px-Volleyball_block.jpg" />
    </div>

    <div class="mt-1 flex flex-1 flex-col p-2">
      <h2 class="flex-1 text-slate-700">Il muro può essere eseguito da uno o più giocatori. Il muro può essere eseguito da uno o più giocatori.</h2>

      <div class="mt-3 flex items-end justify-between">
        <p class="group inline-flex">
          <span class="pr-2 text-lg text-slate-400">
            <i class="far fa-heart"></i>
          </span>
          <span class="mr-3 text-lg font-bold text-orange-500">4</span>
        </p>
        <p class="group inline-flex">
          <span class="pr-2 text-lg font-bold text-orange-500">4</span>
          <span class="text-lg text-slate-400">
            <i class="far fa-heart"></i>
          </span>
        </p>
      </div>
    </div>
  </a>
</div>
-1
投票

我不知道这是否有帮助，但是您可以尝试添加一个 css 吗？ 添加如下。

.group{
position: absolute;
bottom: 3%; //or what height from bottom will you prefer.
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.