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

Question

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

12列为最大1200 12。

​

​

这是我的代码：

​

<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

创建目标布局

• absolutely将蓝色框相对于屏幕定位，使用w-screen类，以便将整个屏幕宽度
• 用于其他框的标准grid布局，依赖col-span类根据requirements
• finally，use w-[1200px]类对其进行大小调整，以设置网格布局的宽度，并向蓝色框中添加左填充pl-[300px]，使其内容远离红色框。由于使用这些“像素级”任意类在代码片段中不起作用，所以我分别用pl-24

和w-96替换了它们。

参见下面的实现示例

​

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

​