Tailwind css中HTML元素的定位
Tailwind css中HTML元素的定位
提问于 2020-03-01 12:56:46
我正在努力学习tailwind-css，或者我想说学习css，我正在努力解决元素的位置问题。使用Vue js组件。
到目前为止，我完成了几个元素的设计：
我想在banner/dark-blue区域内添加一些形状或设计，然后在其中添加一些小工具框。我的代码看起来像这样：
<div class="bg-white block">
<nav-bar></nav-bar>
<div class="hidden md:block w-2/5 top-0 left-0">
<img src="/nits-assets/images/body_shape.png" alt="shape" align="left">
</div>
<div class="hidden md:block">
<img src="/nits-assets/images/body_shape_2.png" alt="shape" align="right">
</div>
<div class="block">
<div class="absolute w-full top-0 pl-12 pr-12 pt-40">
<slider></slider>
<div class="flex justify-around">
<card></card>
<card></card>
<card></card>
<card></card>
</div>
</div>
</div>
<div class="block">
<div class="bg-white overlflow-hidden">
<div class="relative">
<img src="/nits-assets/images/screenshot_banner.png" alt="screenshot_banner" align="center">
<img class="absolute top-0 left-0" src="/nits-assets/images/pattern_1.png" alt="banner" align="left">
</div>
</div>
</div>
<feature></feature>
</div>有关组件代码的参考：https://github.com/nitish1986/sample_website
我的方法是固定父元素的位置或使其相对，然后将形状定位为相对于其父元素的绝对位置，但每当我尝试放置绝对位置时，形状都会到达网站的顶部。它没有采取各自的定位
<div class="bg-white overlflow-hidden">
<div class="relative">
<img src="/nits-assets/images/screenshot_banner.png" alt="screenshot_banner" align="center">
<img class="absolute top-0 left-0" src="/nits-assets/images/pattern_1.png" alt="banner" align="left">
</div>
</div>如何实现这一定位？我想要达到这样的效果：
任何更好的方法都是非常受欢迎的。谢谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-03-05 13:01:27
我对我的问题做了大量的研究工作，我发现我的绝对元素占据了我需要的所有空间。我开始意识到，我必须定义一个空白空间或定义div的高度，这正是我的绝对元素所消耗的。因为在我的代码中有一个非常长的绝对元素，所以唯一能覆盖的就是空的div空间。
<div class="bg-white block">
<nav-bar></nav-bar>
<div class="hidden md:block w-2/5 top-0 h-auto">
<img src="/nits-assets/images/body_shape.png" alt="shape" align="left">
</div>
<div class="hidden md:block h-auto">
<img src="/nits-assets/images/body_shape_2.png" alt="shape" align="right">
</div>
<div class="block bg-white h-screen">
<div class="relative">
<div class="absolute w-full top-0 pl-12 pr-12 pt-40">
<slider></slider>
<div class="flex justify-around">
<card></card>
<card></card>
<card></card>
<card></card>
</div>
</div>
</div>
</div>
<div class="block mt-48 p-56">
<div class="p-2 w-full h-100"></div>
</div>
<feature></feature>
<preview></preview>
<about-us></about-us>
</div>因此，在我的代码中，我保留了空格：
<div class="block mt-48 p-56">
<div class="p-2 w-full h-100"></div>
</div>希望这对某些人有帮助。谢谢
Stack Overflow用户
发布于 2020-03-05 03:27:10
为了实现这种网格，你应该考虑使用Tailwind CSS提供的flex类。在官方文档中可以找到非常好的指南：https://tailwindcss.com/docs/flex/
特别尝试使用.flex-1类，它允许flex项根据需要进行扩展和缩小，而忽略其初始大小。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60472110
复制相关文章
相似问题
腾讯云开发者
