如何解决如何在逆风中保持单个栅格列的高度
在下面的示例中(请参见此处的https://play.tailwindcss.com/wUWT1PCfEU),如果第一个<details>
打开,则其他列的高度也会随之增加。
<div class="grid grid-cols-1 sm:grid-cols-3">
<div class="bg-gray-400">
<details>
<summary>aaaa</summary>
Lorem ipsum dolor sit amet,consectetur adipiscing elit. Sed in dui vitae nunc porta finibus eu ut turpis. Donec rhoncus,mauris at fringilla ullamcorper,nibh lacus laoreet sapien,non viverra lectus diam non dolor.
</details>
</div>
<div class="bg-green-400">
<details>
<summary>bbbb</summary>
A small text
</details>
</div>
<div class="bg-purple-400">
<details>
<summary>cccc</summary>
A medium text
</details>
</div>
</div>
如何防止这种情况并且每列都有各自的高度?
解决方法
您可以借助顺风flex
实现这一目标。考虑下面的代码片段:
<div class="flex w-full">
<div class="bg-gray-400 w-4/12 h-full">
<details>
<summary>aaaa</summary>
Lorem ipsum dolor sit amet,consectetur adipiscing elit. Sed in dui vitae nunc porta finibus eu ut turpis. Donec rhoncus,mauris at fringilla ullamcorper,nibh lacus laoreet sapien,non viverra lectus diam non dolor.
</details>
</div>
<div class="bg-green-400 w-4/12 h-full">
<details>
<summary>bbbb</summary>
A small text
</details>
</div>
<div class="bg-purple-400 w-4/12 h-full">
<details>
<summary>cccc</summary>
A medium text
</details>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。