[英]Tailwind css: align element bottom of parent div
<div class="grid grid-cols-5 gap-4">
<div class="overflow-hidden border hover:rounded-lg hover:shadow-lg justify-evenly">
<div class="flex px-3 pt-1 justify-end">
<a class="underline italic" href="desc.html" title="Description">More</a>
</div>
<a class="cursor-pointer" href="www.www.com">
<img src="img/img.JPG" />
</a>
<div class="flex w-full justify-evenly mt-1 mb-4">
<a href="www.www.com class="bg-green-700 hover:bg-green-800 text-white font-bold py-1 px-4 rounded">
Button
</a>
</div>
</div>
<div class="overflow-hidden border hover:rounded-lg hover:shadow-lg justify-evenly">
</div>
...
</div>
我有多個網格單元格。 每個單元格都包含圖像。 在圖像下有一個按鈕。 當前按鈕位於圖像下方。 但是,圖像的高度不同。 所以這些按鈕沒有對齊。 我想知道如何將這些按鈕放在每個單元格的底部?
我試圖在按鈕包裝器上添加align-bottom
,但它沒有幫助。
只需要玩弄h-# flex flex-col justify-*
。 查看工作演示。
<div class="grid grid-cols-3">
<div class="col-span-1 h-96 flex flex-col justify-between">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="h-full bg-cover bg-center" />
<button class="w-24 px-4 py-2 bg-gray-200 rounded-lg">Button</button>
</div>
<div class="col-span-1 h-96 flex flex-col justify-between">
<img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" class="h-3/5 bg-cover bg-center" />
<button class="w-24 px-4 py-2 bg-gray-200 rounded-lg">Button</button>
</div>
<div class="col-span-1 h-96 flex flex-col justify-between">
<img src="https://homepages.cae.wisc.edu/~ece533/images/baboon.png" class="h-3/4 bg-cover bg-center" />
<button class="w-24 px-4 py-2 bg-gray-200 rounded-lg">Button</button>
</div>
</div>
我看到以下變化:
卡片 div 應該是一個 flex 列,具有類 flex 和 flex-col 以及 justify-between。 這個每個子元素將垂直定位,因此它們之間有相同的空間
將img和more鏈接包裹在一個div中,這樣img和more之間的空間就不會那么大了
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.