CSS - 使侧边栏框变粘

Question

我在我的项目中使用 TailwindCSS。我的页面如下所示：

<main class="max-w-7xl mx-auto mt-6 px-4">
  <div class="flex flex-col md:space-x-12 justify-center md:flex-row">
    <div class="w-full md:w-9/12 mb-8">
      <h1 class="text-3xl font-bold mt-2 mb-4">Title</h1>
      <p class="mb-4 uppercase text-gray-500">META DATA</p>
      <div class="prose lg:prose-lg post">
        <p class="bg-gray-200 p-5 h-36 m-3"></p>
        <p class="bg-gray-200 p-5 h-36 m-3"></p>
        <p class="bg-gray-200 p-5 h-36 m-3"></p>
        <p class="bg-gray-200 p-5 h-36 m-3"></p>
        <p class="bg-gray-200 p-5 h-36 m-3"></p>
        <p class="bg-gray-200 p-5 h-36 m-3"></p>
        <p class="bg-gray-200 p-5 h-36 m-3"></p>
        <p class="bg-gray-200 p-5 h-36 m-3"></p>
      </div>
      <hr class="mt-5" />
    </div>
    <div class="w-full md:w-3/12">
      <div class="mb-5 mx-auto" style="max-width:300px">
        <div class="rounded rounded-lg border">
          <p class="bg-blue-100 p-5 h-12 m-3"></p>
          <p class="bg-blue-100 p-5 h-12 m-3"></p>
          <p class="bg-blue-100 p-5 h-12 m-3"></p>
          <p class="bg-blue-100 p-5 h-12 m-3"></p>
        </div>

        <div class="rounded rounded-lg border mt-10 sticky self-auto top-20">
          <div class="p-20">Make this box sticky</div>
        </div>
      </div>
    </div>
  </div>
</main>

我想让右侧边栏中的底部框变粘，但它没有发生。我看过很多线程并遵循了一些建议，比如让它 flex-start，但它在这个布局中不起作用。你能帮忙吗？

你可以在这里看到游乐场 - https://play.tailwindcss.com/MaFc2vXQRe

Answer 1

在sticky div检查下面代码的父div上添加display: unset;。

<div class="mb-5 mx-auto" style="max-width:300px; display: unset;">

如果您有任何问题，请告诉我