[英]How to create a div with set size in Tailwind CSS
我從教程中獲得了一些入門代碼,但我一直在努力設置正確的大小。 我試圖通過文檔找到解決方案,但我覺得我缺少一些非常基本的東西。 我遇到的問題是盒子的大小會根據里面的內容而變化。 無論里面的內容如何,我都想要一個確定的尺寸集。 這是我的部分代碼:
<div className="flex flex-wrap -m-4">
{projects.map((project) => (
<a
href={project.link}
key={project.image}
rel="noopener noreferrer"
target="_blank"
className="flex w-1/2 h-full p-4">
<div className="flex relative">
<img
alt="gallery"
className="absolute inset-0 w-full h-full rounded-2xl object-cover object-center border-4 border-white"
src={project.image}
/>
<div className="px-8 py-10 relative z-0 w-full rounded-2xl border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
<h2 className="tracking-widest text-sm title-font font-medium text-orange-700 mb-1">
{project.subtitle}
</h2>
<h1 className="title-font text-lg font-medium text-white mb-3">
{project.title}
</h1>
<p className="leading-relaxed">{project.description}</p>
</div>
</div>
</a>
))}
</div>
謝謝!
在你的 a 標簽上,你有className="flex w-1/2 h-full p-4">
將h-full
更新為你想要的指定高度應該可以解決問題。 我相信順風數字將提供em
的價值。 要使這些成為px
值,您可以這樣編寫樣式: h-[50px]
但在方括號中包含您想要的高度而不是 teh 50px
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.