顺风水平平分屏幕

Question

大家好，我正在使用 tailwind css 并尝试创建一个包含 3 个均匀划分的 div 的布局。但是我希望它们在不滚动的情况下适合屏幕，以便所有内容都整齐地放在“一页”上。

现状：

现状码：

(
    <>
      <Header></Header>
      <div className="flex justify-center">
        <div className="w-2/3 my-10 h-screen">
          <div className="bg-gray-400 h-1/3">Image
            {/* <Image src="/../public/rolex.jpg" layout="fill" width={200} height={200} alt=""></Image> */}
          </div>
          <div className="bg-gray-500 h-1/3">Timer</div>
          <div className="bg-gray-600 h-1/3">Stop</div>
        </div>
      </div>
    </>
  );

非常感谢您的帮助！

Answer 1

您在此处的 y-axis 上有保证金：<div className="w-2/3 my-10 h-screen">（“my-10”）。删除它，一切都很好。

顺风水平平分屏幕

Divide screen evenly horizontally with tailwind

reactjs

tailwind-css