gpt4 book ai didi

html - 顺风 : equal height columns

转载 作者:行者123 更新时间:2023-12-05 04:40:04 26 4
gpt4 key购买 nike

我有 3 列,每列包含一个人的形象、姓名、职能和引述。我希望所有 3 列的高度都相等。

到目前为止,我已经尝试设置 p class="flex-1"但什么也没做,我还将第二个内部 div 更改为 class="flex flex-1 p-6 gap-y-4"。这确实使列的高度相等,但它使 div 成为行而不是列,如果我将 flex-1 与 flex-col 一起使用,它不会将列设置为相等的高度。

如何在不使用顺风静态高度的情况下实现上述行为?

HTML

<div class="flex flex-col">
<div class="w-full">
<img class="h-full w-full" [src]="'/api'" alt="employee image">
</div>
<div class="flex flex-col p-6 gap-y-4 text-center bg-indigo-300">
<h3 class="text-3xl font-bold text-white">{{employee?.name}}</h3>
<h4 class="text-lg uppercase text-black">{{employee?.function}}</h4>
<p class="text-center text-xl font-bold text-black" [innerHtml]="employee?.quote"></p>
</div>
</div>

最佳答案

你应该使用工具类 gridgrid-cols-3创建所需的布局。

您可以在下方找到基于您发送的代码的代码示例。顺便说一句,对于您以后可能会提出的有关堆栈溢出的问题,请注意,好的做法是共享实际有效的代码,即自包含的代码,最好是在代码片段中。因此,您的代码引用了您的代码中未包含的图像和员工对象。

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

<div class="grid grid-cols-3 gap-3">
<div class="flex flex-col">
<div>
<div class="h-20 bg-slate-400">Image</div>
</div>
<div class="flex flex-col p-6 gap-y-4 text-center bg-indigo-300 flex-auto">
<h3 class="text-3xl font-bold text-white">Employee Name</h3>
<h4 class="text-lg uppercase text-black">Employee Function</h4>
<p class="text-center text-xl font-bold text-black">Employee Quote</p>
</div>
</div>
<div class="flex flex-col">
<div>
<div class="h-20 bg-slate-400">Image</div>
</div>
<div class="flex flex-col p-6 gap-y-4 text-center bg-indigo-300 flex-auto">
<h3 class="text-3xl font-bold text-white">Employee Name</h3>
<h4 class="text-lg uppercase text-black">Employee Function</h4>
<p class="text-center text-xl font-bold text-black">Employee Quote</p>
</div>
<div class="flex flex-col p-6 gap-y-4 text-center bg-indigo-300 flex-auto">
<h3 class="text-3xl font-bold text-white">Employee Name</h3>
<h4 class="text-lg uppercase text-black">Employee Function</h4>
<p class="text-center text-xl font-bold text-black">Employee Quote</p>
</div>
</div>
<div class="flex flex-col">
<div>
<div class="h-20 bg-slate-400">Image</div>
</div>
<div class="flex flex-col p-6 gap-y-4 text-center bg-indigo-300 flex-auto">
<h3 class="text-3xl font-bold text-white">Employee Name</h3>
<h4 class="text-lg uppercase text-black">Employee Function</h4>
<p class="text-center text-xl font-bold text-black">Employee Quote</p>
</div>
</div>
</div>

编辑:根据 OP 的评论,我添加了 flex-auto到员工卡,以便它可以在需要时增长以匹配其他列的高度。本质上,网格中的所有列都具有相同的高度,如果您希望相同的元素占据所有可能的高度,则只需让它的内部元素增长。

关于html - 顺风 : equal height columns,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70345866/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com