css 顺风垂直拉伸

wpx232ag  于 2023-03-14  发布在  其他
关注(0)|答案(3)|浏览(115)

我创建了一个网格，其中包含多个项目。每个项目可以有不同的高度。在每个项目中，我希望文本在底部对齐，但我无法做到这一点。
这是我使用的代码：

<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

3条答案

按热度按时间
6pp0gazn

6pp0gazn1#

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

<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）分享  回复(0）举报  2023-03-14
zyfwsgd6

zyfwsgd62#

您需要使用flexflex-1跨元素。
Tailwind-play
结构遵循

<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>
赞(0）分享  回复(0）举报  2023-03-14
qmb5sa22

qmb5sa223#

我不知道这是否会有帮助，但是你能试着添加一个css吗？像下面这样添加。

.group{
position: absolute;
bottom: 3%; //or what height from bottom will you prefer.
}
赞(0）分享  回复(0）举报  2023-03-14
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com