css - 如何使用顺风使 CSS 网格项目具有自动高度?
问题描述
假设我在Tailwindcss的帮助下制作了这个 2 x 2 网格布局:
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css" rel="stylesheet"/>
<div class="inline-grid grid-cols-2 grid-rows-2">
<div class="px-1">Full name:</div>
<div class="px-1">Favoutite fruits:</div>
<div class="px-1">John Doe</div>
<div class="px-1">
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>
</div>
</div>
上述布局的问题是行的高度相等,或者换句话说,所有网格项都被迫具有其中最高的高度。
第一行的项目必须具有仅单行文本所需的高度。
我该如何做到这一点?
解决方案
只需删除grid-rows-2
. 不需要定义行,定义列就足够了
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css" rel="stylesheet"/>
<div class="inline-grid grid-cols-2">
<div class="px-1">Full name:</div>
<div class="px-1">Favoutite fruits:</div>
<div class="px-1">John Doe</div>
<div class="px-1">
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>
</div>
</div>
推荐阅读
- c++ - getline 函数跳到下一个输入语句
- java - 当数据没有问题时,字符串或二进制数据将被截断错误
- winforms - 如何在启用多因素身份验证 (MFA) 的情况下遍历 SharePoint 网站集?
- javascript - 当我右键单击选定的选项卡并在新选项卡上打开它时,它总是打开默认的活动选项卡
- flutter - 颤振 | 如何验证时间选择器
- javascript - 当显示键盘反应本机时,使按钮绝对不动
- python - 错误:跳过分析“flask_mysqldb”:找到模块但没有类型提示或库存根
- python - 这是使用openpyxl删除Excel行的更快方法吗?
- python - Python,从类方法中删除列表项
- javascript - 在 index.html 中使用来自 cdn 链接的 React 组件