TailwindCSS定位
TailwindCSS定位
提问于 2021-06-16 20:52:17
我需要(垂直地)将红色盒子和白色盒子重新定位到绿色盒子的底部。我该怎么做？
我尝试过包括、flex、和项目--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>回答 2
Stack Overflow用户
发布于 2021-06-16 21:40:44
我不太清楚你想要实现什么，但是尝试一下，让我知道这是不是你的目标:)
<div class="p-4 bg-green-200 border-2 border-black flex flex-col justify-end"> `<--- check here, with justify-end`
<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 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>Stack Overflow用户
发布于 2021-06-16 21:52:41
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68009873
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号