tailwind-css - TailwindCSS - 定位
问题描述
我需要将红框和白框重新定位(垂直)到绿框的底部。我怎样才能做到这一点?
我尝试包括flex和items-end但无法弄清楚(此处不包括)
https://play.tailwindcss.com/BiTu0woXJi
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="grid grid-cols-2 boder-2 border-black space-x-4">
<div class="p-4 bg-yellow-200 border-2 border-black">
<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>
</div>
<div class="p-4 bg-green-200 border-2 border-black">
<div class="grid grid-cols-4 border-2 border-black"><!--first row-->
<button class="border-2 border-black bg-red-400 px-4 py-2">test</button>
<button class="col-start-3 border-2 bg-white border-black px-4 py-2">test</button>
</div>
<div>
<div class="grid grid-cols-4 border-2 border-black"><!--second row-->
<button class="border-2 border-black bg-red-400 px-4 py-2">test</button>
<button class="col-start-3 border-2 bg-white border-black px-4 py-2">test</button>
</div>
</div>
</div>
</div>
</body>
</html>
解决方案
推荐阅读
- javascript - 在项目列表上切换最喜欢的项目 - 我如何在不使用提交的情况下由用户自动保存项目
- python - 使用 Python 抓取数据属性时遇到问题
- bash - Anaconda 在 Red Hat 7.7 系统上安装失败
- python - Django DictReader 更改名称 [""] == " " 中的 " " 值无
- php - 我怎样才能替换“;” 对于“,”,在一个奇怪的 CSV 文件中
- android - 父样式取决于构建变体
- django - Django 视图无法正确输出
- javascript - 如何将此 Datepicker 与 Puppeteer 一起使用
- c# - 使用 LINQ C# 聚合值和时间
- c# - 输出Customer->Orders->Order时如何使用XmlSerializer去掉层级Orders