tailwind-css - 如何制作标题高度相同的 Tailwind 卡片？
问题描述
所以我使用的是 Tailwind 1.9.6，我想制作 3 张具有相同高度和相同高度标题的卡片。由于浏览器支持，我想使用 flexbox 而不是网格。
无论标题长度如何，我都设法制作了相同高度的卡片，但我希望时钟图标和发布的时间也始终处于相同高度。现在，时钟图标和日期的位置取决于标题长度。
怎样才能做到这一点？
这是 Codepen：https ://codepen.io/vladoapost/pen/LYRYgMd
和代码：
<div class="container mx-auto">
<div class="flex flex-col sm:flex-row justify-between mx-4 md:mx-0 lg:-mx-2 flex-wrap">
<div class="rounded overflow-hidden shadow-lg flex-1 bg-white sm:mx-2 md:mx-1 lg:mx-2 w-full sm:w-1/3 lg:pt-0 border-b-4 border-blue-500 mb-10">
<img src="https://images.unsplash.com/photo-1573748240263-a4e9c57a7fcd" alt="People" class="w-full object-cover h-32 sm:h-48 md:h-64" />
<div class="p-4 md:p-6 bg-white">
<p class="text-blue-500 font-semibold text-xs mb-1 leading-none">Teneriffa</p>
<a href="http://example.test/2020/11/26/hello-world/">
<h3 class="font-semibold mb-2 text-xl leading-tight sm:leading-normal">Hello world!</h3>
</a>
<div class="text-sm flex items-center">
<svg
class="opacity-75 mr-2"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
id="Capa_1"
x="0px"
y="0px"
width="12"
height="12"
viewBox="0 0 97.16 97.16"
style="enable-background: new 0 0 97.16 97.16;"
xml:space="preserve"
>
<path
d="M48.58,0C21.793,0,0,21.793,0,48.58s21.793,48.58,48.58,48.58s48.58-21.793,48.58-48.58S75.367,0,48.58,0z M48.58,86.823 c-21.087,0-38.244-17.155-38.244-38.243S27.493,10.337,48.58,10.337S86.824,27.492,86.824,48.58S69.667,86.823,48.58,86.823z"
></path>
<path d="M73.898,47.08H52.066V20.83c0-2.209-1.791-4-4-4c-2.209,0-4,1.791-4,4v30.25c0,2.209,1.791,4,4,4h25.832 c2.209,0,4-1.791,4-4S76.107,47.08,73.898,47.08z"></path>
</svg>
<p class="leading-none">26.11.2020, 10:10 Uhr</p>
</div>
</div>
</div>
<div class="rounded overflow-hidden shadow-lg flex-1 bg-white sm:mx-2 md:mx-1 lg:mx-2 w-full sm:w-1/3 lg:pt-0 border-b-4 border-blue-500 mb-10">
<img src="https://images.unsplash.com/photo-1573748240263-a4e9c57a7fcd" alt="People" class="w-full object-cover h-32 sm:h-48 md:h-64" />
<div class="p-4 md:p-6 bg-white">
<p class="text-blue-500 font-semibold text-xs mb-1 leading-none">Gran Canaria</p>
<a href="http://example.test/2020/11/26/hello-world/">
<h3 class="font-semibold mb-2 text-xl leading-tight sm:leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
</a>
<div class="text-sm flex items-center">
<svg
class="opacity-75 mr-2"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
id="Capa_1"
x="0px"
y="0px"
width="12"
height="12"
viewBox="0 0 97.16 97.16"
style="enable-background: new 0 0 97.16 97.16;"
xml:space="preserve"
>
<path
d="M48.58,0C21.793,0,0,21.793,0,48.58s21.793,48.58,48.58,48.58s48.58-21.793,48.58-48.58S75.367,0,48.58,0z M48.58,86.823 c-21.087,0-38.244-17.155-38.244-38.243S27.493,10.337,48.58,10.337S86.824,27.492,86.824,48.58S69.667,86.823,48.58,86.823z"
></path>
<path d="M73.898,47.08H52.066V20.83c0-2.209-1.791-4-4-4c-2.209,0-4,1.791-4,4v30.25c0,2.209,1.791,4,4,4h25.832 c2.209,0,4-1.791,4-4S76.107,47.08,73.898,47.08z"></path>
</svg>
<p class="leading-none">26.11.2020, 10:10 Uhr</p>
</div>
</div>
</div>
<div class="rounded overflow-hidden shadow-lg flex-1 bg-white sm:mx-2 md:mx-1 lg:mx-2 w-full sm:w-1/3 lg:pt-0 border-b-4 border-blue-500 mb-10">
<img src="https://images.unsplash.com/photo-1573748240263-a4e9c57a7fcd" alt="People" class="w-full object-cover h-32 sm:h-48 md:h-64" />
<div class="p-4 md:p-6 bg-white">
<p class="text-blue-500 font-semibold text-xs mb-1 leading-none">Fuerteventura</p>
<a href="http://example.test/2020/11/26/hello-world/">
<h3 class="font-semibold mb-2 text-xl leading-tight sm:leading-normal">Hello world!</h3>
</a>
<div class="text-sm flex items-center">
<svg
class="opacity-75 mr-2"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
id="Capa_1"
x="0px"
y="0px"
width="12"
height="12"
viewBox="0 0 97.16 97.16"
style="enable-background: new 0 0 97.16 97.16;"
xml:space="preserve"
>
<path
d="M48.58,0C21.793,0,0,21.793,0,48.58s21.793,48.58,48.58,48.58s48.58-21.793,48.58-48.58S75.367,0,48.58,0z M48.58,86.823 c-21.087,0-38.244-17.155-38.244-38.243S27.493,10.337,48.58,10.337S86.824,27.492,86.824,48.58S69.667,86.823,48.58,86.823z"
></path>
<path d="M73.898,47.08H52.066V20.83c0-2.209-1.791-4-4-4c-2.209,0-4,1.791-4,4v30.25c0,2.209,1.791,4,4,4h25.832 c2.209,0,4-1.791,4-4S76.107,47.08,73.898,47.08z"></path>
</svg>
<p class="leading-none">26.11.2020, 10:10 Uhr</p>
</div>
</div>
</div>
</div>
</div>
解决方案
我想出了一个解决方案，将flex flex-col指令添加到您的一些容器（包含图像和卡体的容器，以及卡体本身）和flex-1卡体（使其占据整个左侧空间）和a包装你的h3.
我不知道书面解释是否清楚但检查片段，它应该做得更好！
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
<div class="container mx-auto">
<div class="flex flex-col sm:flex-row justify-between mx-4 md:mx-0 lg:-mx-2 flex-wrap">
<div class="rounded overflow-hidden shadow-lg flex-1 bg-white sm:mx-2 md:mx-1 lg:mx-2 w-full sm:w-1/3 lg:pt-0 border-b-4 border-blue-500 mb-10 flex flex-col">
<img src="https://images.unsplash.com/photo-1573748240263-a4e9c57a7fcd" alt="People" class="w-full object-cover h-32 sm:h-48 md:h-64" />
<div class="p-4 md:p-6 bg-white flex flex-col flex-1">
<p class="text-blue-500 font-semibold text-xs mb-1 leading-none">Teneriffa</p>
<a href="http://example.test/2020/11/26/hello-world/" class="flex-1">
<h3 class="font-semibold mb-2 text-xl leading-tight sm:leading-normal">Hello world!</h3>
</a>
<div class="text-sm flex items-center">
<svg class="opacity-75 mr-2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="12" height="12" viewBox="0 0 97.16 97.16" style="enable-background: new 0 0 97.16 97.16;" xml:space="preserve">
<path
d="M48.58,0C21.793,0,0,21.793,0,48.58s21.793,48.58,48.58,48.58s48.58-21.793,48.58-48.58S75.367,0,48.58,0z M48.58,86.823 c-21.087,0-38.244-17.155-38.244-38.243S27.493,10.337,48.58,10.337S86.824,27.492,86.824,48.58S69.667,86.823,48.58,86.823z"
></path>
<path d="M73.898,47.08H52.066V20.83c0-2.209-1.791-4-4-4c-2.209,0-4,1.791-4,4v30.25c0,2.209,1.791,4,4,4h25.832 c2.209,0,4-1.791,4-4S76.107,47.08,73.898,47.08z"></path>
</svg>
<p class="leading-none">26.11.2020, 10:10 Uhr</p>
</div>
</div>
</div>
<div class="rounded overflow-hidden shadow-lg flex-1 bg-white sm:mx-2 md:mx-1 lg:mx-2 w-full sm:w-1/3 lg:pt-0 border-b-4 border-blue-500 mb-10 flex flex-col">
<img src="https://images.unsplash.com/photo-1573748240263-a4e9c57a7fcd" alt="People" class="w-full object-cover h-32 sm:h-48 md:h-64" />
<div class="p-4 md:p-6 bg-white flex flex-col flex-1">
<p class="text-blue-500 font-semibold text-xs mb-1 leading-none">Gran Canaria</p>
<a href="http://example.test/2020/11/26/hello-world/" class="flex-1">
<h3 class="font-semibold mb-2 text-xl leading-tight sm:leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
</a>
<div class="text-sm flex items-center">
<svg class="opacity-75 mr-2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="12" height="12" viewBox="0 0 97.16 97.16" style="enable-background: new 0 0 97.16 97.16;" xml:space="preserve">
<path
d="M48.58,0C21.793,0,0,21.793,0,48.58s21.793,48.58,48.58,48.58s48.58-21.793,48.58-48.58S75.367,0,48.58,0z M48.58,86.823 c-21.087,0-38.244-17.155-38.244-38.243S27.493,10.337,48.58,10.337S86.824,27.492,86.824,48.58S69.667,86.823,48.58,86.823z"
></path>
<path d="M73.898,47.08H52.066V20.83c0-2.209-1.791-4-4-4c-2.209,0-4,1.791-4,4v30.25c0,2.209,1.791,4,4,4h25.832 c2.209,0,4-1.791,4-4S76.107,47.08,73.898,47.08z"></path>
</svg>
<p class="leading-none">26.11.2020, 10:10 Uhr</p>
</div>
</div>
</div>
<div class="rounded overflow-hidden shadow-lg flex-1 bg-white sm:mx-2 md:mx-1 lg:mx-2 w-full sm:w-1/3 lg:pt-0 border-b-4 border-blue-500 mb-10 flex flex-col">
<img src="https://images.unsplash.com/photo-1573748240263-a4e9c57a7fcd" alt="People" class="w-full object-cover h-32 sm:h-48 md:h-64" />
<div class="p-4 md:p-6 bg-white flex flex-col flex-1">
<p class="text-blue-500 font-semibold text-xs mb-1 leading-none">Fuerteventura</p>
<a href="http://example.test/2020/11/26/hello-world/" class="flex-1">
<h3 class="font-semibold mb-2 text-xl leading-tight sm:leading-normal">Hello world!</h3>
</a>
<div class="text-sm flex items-center">
<svg class="opacity-75 mr-2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="12" height="12" viewBox="0 0 97.16 97.16" style="enable-background: new 0 0 97.16 97.16;" xml:space="preserve">
<path
d="M48.58,0C21.793,0,0,21.793,0,48.58s21.793,48.58,48.58,48.58s48.58-21.793,48.58-48.58S75.367,0,48.58,0z M48.58,86.823 c-21.087,0-38.244-17.155-38.244-38.243S27.493,10.337,48.58,10.337S86.824,27.492,86.824,48.58S69.667,86.823,48.58,86.823z"
></path>
<path d="M73.898,47.08H52.066V20.83c0-2.209-1.791-4-4-4c-2.209,0-4,1.791-4,4v30.25c0,2.209,1.791,4,4,4h25.832 c2.209,0,4-1.791,4-4S76.107,47.08,73.898,47.08z"></path>
</svg>
<p class="leading-none">26.11.2020, 10:10 Uhr</p>
</div>
</div>
</div>
</div>
</div>推荐阅读
- google-cloud-platform - 如何在数据流模板中运行多个查询？
- flutter - Flutter Navigator 2.0 中 route.didPop(result) 何时等于 false
- python - Python Pandas 显示两个数据帧之间的位置变化
- postgresql - PSQL 将映射应用到数组
- wpf - 有时 ListView 中的图像会消失
- typescript - 从 TypeScript 4.1 中的参数计算其中一个键的返回类型
- python - 计算两个不同列中的单词并按行求和
- mongodb - 如何在项目聚合中删除一个文档
- php - 日志未显示在 codeigniter 3 的日志文件夹中
- javascript - 当我的机器人加入新服务器并离开到文本文件时记录