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

Posted 2023-03-07

【中文标题】如何在顺风中创建这种复杂的布局？

【英文标题】：How to create this complex layout in tailwind?

【发布时间】：2022-01-01 05:28:25

【问题描述】：

我想用顺风创建一个像下面这样的布局。我不知道如何使蓝色区域具有全宽，但紫色区域限制为 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>

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

【问题讨论】：

寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/example doesn't work can I just paste a link。

我创建了一个看起来像要实现的布局，看看here。我认为最有用的一点是相对于屏幕“绝对”定位蓝色框，并使用类w-screen 和right-0 和z-indices。请快速查看以检查我是否很好地理解了要求，如果没有，请编辑您的答案以更具体地了解要求。如果没问题，我会回答的。

@kenshuri 谢谢，但我希望蓝色形状从红色形状到右 0 位置

我不知道...向左添加一些固定填充可能使其“看起来”像蓝色形状从红色形状中的位置，如 play.tailwindcss.com/dMFTmAH8by ，但我同意它并不令人满意。如果您设法实现您想要的，请更新问题。

@kenshuri 你好，设计师刚刚更新蓝色区域可以限制，我觉得你说的对，请回答

【参考方案1】：

创建目标布局

absolutely 相对于屏幕定位蓝色框，使用 w-screen 类使其占据整个屏幕宽度 对其他框使用标准 grid 布局，依靠 col-span 类根据要求调整大小 最后，使用w-[1200px]类设置网格布局的宽度，并在蓝色框内添加一个左填充pl-[300px]，使其内容远离红色框。由于使用这些“pixel-perfet”任意类在代码 sn-p 中不起作用，我将它们分别替换为 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>