TailwindCSS - 修复了 flex 父级的 div 全宽

Posted 2023-03-07

技术标签:

【中文标题】TailwindCSS - 修复了 flex 父级的 div 全宽【英文标题】：TailwindCSS - Fixed div full width of flex parent 【发布时间】：2021-03-23 20:48:23 【问题描述】：

我使用 TailwindCSS 创建了以下模板：

<body class="h-full">
  <div class="flex h-full">
    <div class="w-5/6">
      <div class="grid grid-rows-2 grid-flow-col h-full" style="grid-template-rows: 93.8% 6.2%;">
        <div class="relative bg-gray-200 h-full">1</div>
        <div class="bg-red-200">

            <!-- This area is where I have problems -->
            <div class="flex h-full">
              <div class="w-1/2 h-full">
                <div class="bg-blue-500 h-full fixed" style="width: inherit;">Link #1</div>
              </div>
              <div class="w-1/2 h-full">
                <div class="bg-green-500 h-full fixed" style="width: inherit;">Link #2</div>
              </div>
            </div>

        </div>
      </div>
    </div>
    <div class="w-1/6">
    <div class="grid grid-rows-2 grid-flow-col h-full" style="grid-template-rows: 20% 80%;">
                <div class="md:py-16 md:px-4 border-l border-gray-100 bg-gray-50">3
                </div>
                <div class="md:py-4 md:px-4 border-l border-t border-gray-100">4</div>
          </div>
    </div>
  </div>
</body>

请看下面我创建的小提琴here。

我遇到的问题是这两个 div：

<div class="flex h-full">
    <div class="w-1/2 h-full">
         <div class="bg-blue-500 h-full fixed" style="width: inherit;">Link #1</div>
    </div>
    <div class="w-1/2 h-full">
         <div class="bg-green-500 h-full fixed" style="width: inherit;">Link #2</div>
   </div>
</div>

我想在底部有两个链接（在我的示例中为链接 #1 和链接 #2），它们具有固定的位置。每个链接的宽度应占父 div 的 50%。

正如您在上面发布的示例中所见，<div> 的两个底部的宽度超过了父级 (#1) 的宽度。

【问题讨论】：

【参考方案1】：

我不确定这是否正是您想要的，但请看一看。

我认为部分问题是 flexbox 无法控制固定位置的项目。宽度也需要调整。此外，您更应该固定容器的位置，而不是每个单独的链接。

您可以使用类似的东西，但 fixed 元素通常位于这些容器之外，因为修复会将其从页面流中移除。

https://play.tailwindcss.com/YPc9nuhM9z

【讨论】：

以上是关于TailwindCSS - 修复了 flex 父级的 div 全宽的主要内容，如果未能解决你的问题，请参考以下文章

CSS Flex - 使用 TailwindCSS 设置相同的宽度

用 flex 填充页面并用 body 将页脚粘贴到底部（Tailwindcss，Nextjs）