CSS 网格内 Flex 搜索卡各部分之间存在不需要的空白

Question

我正在尝试使用顺风布局一些搜索结果卡。这些卡片使用 CSS 网格进行排列，而卡片内的内容（标题图像、标题和一些元数据）则使用 Flex 进行布局。目的是所有卡片都应该展开以显示完整标题，并且一行中的所有卡片都应该匹配该高度。

我的两张卡片标记的简化版本如下所示：

<ul class="grid grid-cols-3 justify-center justify-items-center gap-x-8 gap-y-8">
  <li class="w-full">
    <div class="border-iwsr-blue flex h-full flex-col gap-2 overflow-hidden rounded-lg shadow-md">
      <div class="relative h-64 w-full overflow-hidden rounded-lg"><div class="h-full w-full" style="background:red"></div></div>
      <div class="flex h-full w-full flex-col p-4">
        <div class="flex h-full flex-col justify-between">
          <div class="pb-2 font-serif text-2xl leading-7">Article 1</div>

          <div class="mt-2 text-xs text-gray-700"><span class="mr-3 font-bold">Article</span>29th November 2023</div>
        </div>
      </div>
    </div>
  </li>
  <li class="w-full">
    <div class="border-iwsr-blue flex h-full flex-col gap-2 overflow-hidden rounded-lg shadow-md">
      <div class="relative h-64 w-full overflow-hidden rounded-lg">
        <div class="h-full w-full" style="background:red"></div>
      </div>
      <div class="flex h-full w-full flex-col p-4">
        <div class="flex h-full flex-col justify-between">
          <div class="pb-2 font-serif text-2xl leading-7">Article with a longer title that goes over multiple lines</div>

          <div class="mt-2 text-xs text-gray-700"><span class="mr-3 font-bold">Article</span>17th October 2023</div>
        </div>
      </div>
    </div>
  </li>
</ul>

在顺风游乐场看到这个。

上述标记的结果如下所示

问题在于每张卡片的标题和页脚之间存在大量不需要的空白。可能相关的是，红色框（真实网站上的图像）没有以完整的

h-64

高度显示。

任何人都可以帮我确定是什么引入了这个额外的空白吗？

Answer 1

空白是由于元素比内容高而引起的，并且标题和页脚的垂直弹性布局父级通过

justify-content: space-between

类应用了

justify-between

。您可以考虑删除此类以删除标题和页脚之间的空白：

<script src="https://cdn.tailwindcss.com/3.4.1"></script>

<ul class="grid grid-cols-3 justify-center justify-items-center gap-x-8 gap-y-8">
  <li class="w-full">
    <div class="border-iwsr-blue flex h-full flex-col gap-2 overflow-hidden rounded-lg shadow-md">
      <div class="relative h-64 w-full overflow-hidden rounded-lg"><div class="h-full w-full" style="background:red"></div></div>
      <div class="flex h-full w-full flex-col p-4">
        <div class="flex h-full flex-col">
          <div class="pb-2 font-serif text-2xl leading-7">Article 1</div>

          <div class="mt-2 text-xs text-gray-700"><span class="mr-3 font-bold">Article</span>29th November 2023</div>
        </div>
      </div>
    </div>
  </li>
  <li class="w-full">
    <div class="border-iwsr-blue flex h-full flex-col gap-2 overflow-hidden rounded-lg shadow-md">
      <div class="relative h-64 w-full overflow-hidden rounded-lg">
        <div class="h-full w-full" style="background:red"></div>
      </div>
      <div class="flex h-full w-full flex-col p-4">
        <div class="flex h-full flex-col">
          <div class="pb-2 font-serif text-2xl leading-7">Article with a longer title that goes over multiple lines</div>

          <div class="mt-2 text-xs text-gray-700"><span class="mr-3 font-bold">Article</span>17th October 2023</div>
        </div>
      </div>
    </div>
  </li>
</ul>

和/或者您可以通过删除应用于某些元素的一些

height: 100%

值来降低元素父级的高度，使它们仅与它们包含的内容一样高：

<script src="https://cdn.tailwindcss.com/3.4.1"></script>

<ul class="grid grid-cols-3 justify-center justify-items-center gap-x-8 gap-y-8">
  <li class="w-full self-start">
    <div class="border-iwsr-blue flex h-full flex-col gap-2 overflow-hidden rounded-lg shadow-md">
      <div class="relative h-64 w-full overflow-hidden rounded-lg"><div class="h-full w-full" style="background:red"></div></div>
      <div class="flex w-full flex-col p-4">
        <div class="flex h-full flex-col">
          <div class="pb-2 font-serif text-2xl leading-7">Article 1</div>

          <div class="mt-2 text-xs text-gray-700"><span class="mr-3 font-bold">Article</span>29th November 2023</div>
        </div>
      </div>
    </div>
  </li>
  <li class="w-full self-start">
    <div class="border-iwsr-blue flex h-full flex-col gap-2 overflow-hidden rounded-lg shadow-md">
      <div class="relative h-64 w-full overflow-hidden rounded-lg">
        <div class="h-full w-full" style="background:red"></div>
      </div>
      <div class="flex w-full flex-col p-4">
        <div class="flex h-full flex-col">
          <div class="pb-2 font-serif text-2xl leading-7">Article with a longer title that goes over multiple lines</div>

          <div class="mt-2 text-xs text-gray-700"><span class="mr-3 font-bold">Article</span>17th October 2023</div>
        </div>
      </div>
    </div>
  </li>
</ul>