我可以請你幫忙解決這個https://play.tai??lwindcss.com/fIuk5aXhz0嗎？
- 我現在所擁有的：
- 我在這里需要的是
HELLO 2在綠色框之后降低紅色 div 高度，如下所示：
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="grid grid-cols-4 gap-6">
<div class="grid gap-4 bg-red-500">
<span>HELLO 1</span>
<span>HELLO 2</span>
</div>
<div class="grid gap-4 col-span-3 bg-green-500">
<span>HELLO 1</span>
<span>HELLO 2</span>
<span>HELLO 3</span>
<span>HELLO 4</span>
<span>HELLO 5</span>
<span>HELLO 6</span>
</div>
</div>uj5u.com熱心網友回復：
我想你可以使用auto-rows-min和包裝這兩個HELLO在div這種情況下。
例子
uj5u.com熱心網友回復：
我是這樣理解的。左列應該不受右列高度的影響吧？如果是這樣，那么我會以這種方式實作它。
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css' media='all' />
<div class="bg-gray-400 min-h-screen flex items-center justify-center ">
<div class="grid grid-cols-2 gap-2 w-1/2">
<div class="row-span-2 rounded ">
<div class="bg-white p-10 rounded bg-green-100 mb-2">Block A</div>
<div class="bg-white p-10 rounded bg-green-100 ">Block B</div>
</div>
<div class="row-span-2 bg-white p-10 rounded">lorem lorem lroem lorem lorem lroem lorem lorem lroemlorem lorem lroemlorem lorem lroem lorem lorem lroem lorem lorem lroem lorem lorem lroem lorem lorem lroem lorem lorem lroem lorem lorem lroem lorem lorem lroem lorem lorem lroem lorem lorem lroem lorem lorem lroem lorem lorem lroem lorem lorem lroem lorem lorem lroem lorem lorem lroem lorem lorem lroem lorem lorem lroem lorem lorem lroem lorem lorem lroem lorem lorem lroem lorem lorem lroem
lorem lorem lroem lorem lorem lroem lorem lorem lroem
</div>
</div>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/348953.html