如何使顺风行等高？答案

【问题标题】：How to make tailwind rows equal height?如何使顺风行等高？
【发布时间】：2022-02-11 07:39:41
【问题描述】：

我的表格几乎按照我的意愿布置，但表格中的一行会有不同长度的文本。

在其下方有一行，我想将其推到父容器的底部，使变量行高于相同的高度。

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>

谢谢，安迪

【问题讨论】：

标签： tailwind-css

【解决方案1】：

终于明白了：

<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>

【讨论】：