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

Question

我想使用 tailwind 创建如下所示的布局。我不知道如何使蓝色区域具有全宽，但紫色区域有 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使用 w-screen class 相对于屏幕定位蓝框，使其占据整个屏幕宽度
对其他框使用标准 grid 布局，依靠 col-span classes 根据要求调整它们的大小
最后，使用w-[1200px] class 设置网格布局的宽度，并在蓝色框上添加一个left-padding pl-[300px]，使其内容远离红色框。由于使用这些“像素完美”任意 classes 在代码片段中不起作用，我分别用 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>

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

How to create this complex layout in tailwind?

html

css

flexbox

tailwind-css