html - 如何在 Tailwind CSS 中创建具有设定大小的 div

Question

我从教程中获得了一些入门代码，但我一直在努力设置正确的大小。我试图通过文档找到解决方案，但我觉得我缺少一些非常基本的东西。我遇到的问题是盒子的大小会根据里面的内容而变化。无论里面的内容如何，​​我都想要一个确定的尺寸集。这是我的部分代码:

<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>

谢谢!

Answer 1

在您的 a 标签上，您有 className="flex w-1/2 h-full p-4"> 将 h-full 更新为指定的高度你想要的应该可以解决问题。我相信顺风数字将提供 em 的值。要使这些成为 px 值，您可以这样编写样式:h-[50px] 但在方括号中包含您想要的高度而不是 teh 50px.