顺风分类的地方很奇怪答案

【问题标题】：Tailwind divide-y class place weird顺风分类的地方很奇怪
【发布时间】：2022-02-10 04:58:05
【问题描述】：

我在使用 Tailwind 的 divide-y 类时遇到了问题，我从原始代码创建了一个示例，这里有一个链接：https://play.tailwindcss.com/q28EwgI0Ho。

<body>
  <div class="bg-blue-900 text-center py-12">Random Body</div>
  <div class="relative pt-12">
    <div class="bg-blue-900 absolute inset-0 h-24" />
    <div class="grid grid-cols-2 divide-x divide-y rounded-xl w-11/12 bg-white mx-auto pb-2">
      <div class="relative p-8">
        <div class="absolute bg-green-500 inset-x-0 w-1/5 md:w-1/12 text-center mx-auto -mt-12">Title</div>
        <div class="text-center text-xs">Random Text</div>
      </div>
      <div class="relative p-8">
        <div class="absolute bg-green-500 inset-x-0 w-1/5 md:w-1/12 text-center mx-auto -mt-12">Title</div>
        <div class="text-center text-xs">Random Text</div>
      </div>
      <div class="relative bg-white col-span-2">
        <div class="text-center text-xs">Random Text</div>
      </div>
    </div>
  </div>
</body>

正如您所见，divide-x 属性在右侧效果不佳，它会溢出，我们可以看到它，因为 div 有圆角。请问如何避免这种情况？

请注意，我不能使用溢出隐藏，因为这会导致标题 div 被隐藏。

【问题讨论】：

第三个 div 是空的吗？它关闭不当。
不，不是，但谢谢你的回答：D

标签： css tailwind-css

【解决方案1】：

问题在于使用divide-y，相反，您可以为下面的标题添加border-t。示例：https://play.tailwindcss.com/7aPvDxo7z6

【讨论】：

好的，谢谢先生。我不知道为什么我没有想到这一点