如何在顺风中创建这种复杂的布局？

Question

我想用顺风创建一个像下面这样的布局。 我不知道如何使蓝色区域具有全宽，但紫色区域的限制为 9/12 网格。

12 列最大为 1200 像素。

这是我的代码：

 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/> <div class="container lg:w-1200px bg-red-500 mx-auto flex"> <div class="w-3/12 bg-blue-500 grid place-items-center h-screen">3/12</div> <div class="w-9/12 h-80 relative"> <div class="bg-yellow-500 h-20"></div> <div class="bg-green-500 h-screen grid place-items-center">9/12</div> </div> </div>

也许这对我来说很复杂，而不是你。 很抱歉。 谢谢！

Answer 1

创建目标布局

• absolute是 position 相对于屏幕的蓝框，使用w-screen class 使其占据整个屏幕宽度
• 对其他盒子使用标准grid布局，依靠col-span类根据要求调整它们的大小
• 最后，使用w-[1200px] class 设置网格布局的宽度，并在蓝色框中添加左填充pl-[300px]使其内容远离红色框。 由于使用这些“pixel-perfet”任意类在代码片段中不起作用，我将它们分别替换为w-96和pl-24

请参阅下面的实现示例

 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> <div class="w-96 h-screen bg-red-100 grid grid-cols-12"> <div class="bg-red-500 col-span-3 z-20 relative">Something in red</div> <div class="bg-blue-500 w-full absolute pl-24 h-12 z-0">Something in blue</div> <div class="bg-purple-700 col-span-9 z-20 transform translate-y-7">Something in purple</div> <div></div> </div>