如何使顺风排等高？
如何使顺风排等高？
提问于 2022-02-10 23:09:44
我有一张表，基本上是按我的要求排列的，但表中的一行将有不同长度的文本。
在这下面有一行，我想推到父容器的底部，使变量行高于相同的高度。
https://codepen.io/chris__sev/pen/mdyoGar
有什么指示吗？
<html>
<body>
<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 md:w-1/3 lg:pt-0 border-b-4 border-blue-500 mb-10">
<div class="p-4 md:p-6 bg-white flex flex-col">
<a href="http://news.reiseuhu.test/2020/11/26/hello-world/">
<h3 class="font-semibold mb-2 text-xl leading-tight sm:leading-normal text-center">Basic</h3>
<div class="p-6 flex-1 mb-auto text-center">
<ul class="leading-loose">
<li>15 accounts</li>
<li>1 product</li>
<li>Cannot change plans</li>
</ul>
<div class="mt-6 py-4 flex-1">
<button class="bg-indigo-600 text-xl text-white py-2 px-6 rounded hover:bg-indigo-700 transition-colors duration-300">Get Started</button>
</div>
</div>
<div class="p-6 md:py-8 flex-grow">
<p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam libero nulla, egestas vel vehicula ut, pretium vel erat. Quisque quam elit, fermentum lacinia aliquam sit amet, lobortis et ex. Pellentesque mauris sapien, posuere et nisl a, aliquam pharetra nulla. Morbi nec ex fermentum, euismod dolor in, aliquam ipsum. Morbi ligula libero, tincidunt nec lacus eu, interdum semper tellus. Duis leo eros, facilisis id rhoncus et, tempor eu nisl. Proin ullamcorper ipsum vel lorem luctus viverra. Phasellus sit amet arcu nec nunc sollicitudin aliquet et in nulla. Nulla mollis ullamcorper mauris, sed suscipit urna commodo mattis. Cras tortor ex, porta quis varius sed, porta condimentum dolor. Vestibulum sed nibh sed ex maximus posuere. Vivamus a erat eget neque laoreet imperdiet id ut purus. Curabitur id arcu nisi. Aliquam dui orci, porta nec blandit eget, semper eget leo.</p>
</div>
<div class="pricing-amount flex-1 bg-indigo-100 p-6 transition-colors duration-300 text-center">
<div class=""><span class="text-4xl font-semibold">$20</span> /month</div>
</div>
</a>
</div>
</div>
<div class="rounded overflow-hidden shadow-lg flex-1 bg-white sm:mx-2 md:mx-1 lg:mx-2 w-full md:w-1/3 lg:pt-0 border-b-4 border-blue-500 mb-10">
<div class="p-4 md:p-6 bg-white flex flex-col">
<a href="http://news.reiseuhu.test/2020/11/26/hello-world/">
<h3 class="font-semibold mb-2 text-xl leading-tight sm:leading-normal text-center">Pro</h3>
<div class="p-6 flex-1 mb-auto text-center">
<ul class="leading-loose">
<li>5 accounts</li>
<li>25 products</li>
<li>Customer can change plan</li>
</ul>
<div class="mt-6 py-4 flex-1">
<button class="bg-indigo-600 text-xl text-white py-2 px-6 rounded hover:bg-indigo-700 transition-colors duration-300">Get Started</button>
</div>
</div>
<div class="p-6 md:py-8 flex-grow">
<p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>
</div>
<div class="pricing-amount flex-1 bg-indigo-100 p-6 transition-colors duration-300 text-center">
<div class=""><span class="text-4xl font-semibold">$50</span> /month</div>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
谢谢你，安迪
回答 1
Stack Overflow用户
发布于 2022-02-10 23:39:41
最终得到了：
<div class="w-full bg-blue pt-8">
<div class="flex flex-col sm:flex-row justify-center mx-4 md:mx-0 lg:-mx-2 flex-wrap">
@foreach ($plans as $plan)
<div class="flex-1 lg:flex-initial lg:w-1/3 rounded-lg bg-white mt-4 flex flex-col sm:mx-2 md:mx-1 lg:mx-2">
<div class="p-8 text-3xl font-bold text-center">{{ $plan->name }}</div>
<div class="border-0 border-grey-light border-t border-solid text-sm">
@foreach($plan->featureSpecs as $featureSpec)
<div class="text-center border-0 border-grey-light border-b border-solid py-4">
{{ $featureSpec->spec }}
</div>
@endforeach
<div class="p-6 md:py-8">
<p class="text-gray-600">{{ $plan->description }}</p>
</div>
</div>
<div class="text-center pt-8 mb-8 mt-auto">
<div class="pricing-amount bg-indigo-100 p-6 transition-colors duration-300 text-center mt-auto">
<span class="text-4xl font-semibold">{{$plan->price_amount}}</span> /{{$plan->price_frequency}}
</div>
<div class="mt-6 py-4 flex-1">
<button class="bg-indigo-600 text-xl text-white py-2 px-6 rounded hover:bg-indigo-700 transition-colors duration-300">Get Started</button>
</div>
</div>
</div>
@endforeach
</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71073382
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号