主页 / coding / 问题 / 77441660
Accepted
erics15
Asked: 2023-11-08 05:44:12 +0800 CST

如何使用网格在顺风响应视图中使 2 个 div 彼此相邻

  • 772

我有这个标记，只是想让这两个 div 在响应式视图中并排放置。不知道我在这里缺少什么。尝试坚持网格，因为父顶部正在控制列。因此，在小屏幕上将它们放在一起，在大屏幕及上方，保持原样。其中有 3 列，但为了简洁我只包含了一列。

这是顺风玩法 https://play.tai​​lwindcss.com/VoNukJ0D7h

和我的代码

  <div class="mt-1 grid grid-cols-1 font-sm gap-[0.625rem] md:grid-cols-3 md:gap-x-0.75">
      <div>
        <span class=" font-bold">Some text that goes here </span>
          <div class="mt-1 bg-[#f4f4f4] border border-gray-detailBorder py-1.25 px-0.75 items-center text-center w-1/2 md:w-full">
          <p>
            <span class="block font-semibold text-[1.75rem] leading-9 text-blue" id="costs-students-awarded-grants-percent">
              PH%
            </span>
            <span class="mt-0.5 block font-medium text-sm leading-[1.125rem]">
            Text Here
            </span>
          </p>
        </div>
        <div class="bg-[#f4f4f4] border border-gray-detailBorder border-t-0 py-1.25 px-0.75 items-center text-center w-1/2 md:w-full">
          <p>
            <span class="block font-semibold text-[1.75rem] leading-9 text-blue" id="costs-students-awarded-grants-percent">
              PH%
            </span>
            <span class="mt-0.5 block font-medium text-sm leading-[1.125rem]">
            Text Here
          </span>
          </p>
        </div>
      </div>

谢谢！

tailwind-css

1 个回答

  1. Best Answer

    您可以考虑将元素包装在水平弹性布局中，例如：

    <script src="https://cdn.tailwindcss.com/3.3.5"></script>

<div class="mt-1 grid grid-cols-1 font-sm gap-[0.625rem] md:grid-cols-3 md:gap-x-0.75">
  <div>
    <span class=" font-bold">Some text that goes here </span>
    <div class="flex">
      <div class="mt-1 bg-[#f4f4f4] border border-gray-detailBorder py-1.25 px-0.75 items-center text-center w-1/2 md:w-full">
        <p>
          <span class="block font-semibold text-[1.75rem] leading-9 text-blue" id="costs-students-awarded-grants-percent">
            PH%
          </span>
          <span class="mt-0.5 block font-medium text-sm leading-[1.125rem]">
          Text Here
          </span>
        </p>
      </div>
      <div class="bg-[#f4f4f4] border border-gray-detailBorder border-t-0 py-1.25 px-0.75 items-center text-center w-1/2 md:w-full">
        <p>
          <span class="block font-semibold text-[1.75rem] leading-9 text-blue" id="costs-students-awarded-grants-percent">
            PH%
          </span>
          <span class="mt-0.5 block font-medium text-sm leading-[1.125rem]">
          Text Here
        </span>
      </p>
    </div>
  </div>
</div>

    或者使用 2 列网格布局，例如：

    <script src="https://cdn.tailwindcss.com/3.3.5"></script>

<div class="mt-1 grid grid-cols-1 font-sm gap-[0.625rem] md:grid-cols-3 md:gap-x-0.75">
  <div>
    <span class=" font-bold">Some text that goes here </span>
    <div class="grid grid-cols-2">
      <div class="mt-1 bg-[#f4f4f4] border border-gray-detailBorder py-1.25 px-0.75 items-center text-center w-1/2 md:w-full">
        <p>
          <span class="block font-semibold text-[1.75rem] leading-9 text-blue" id="costs-students-awarded-grants-percent">
            PH%
          </span>
          <span class="mt-0.5 block font-medium text-sm leading-[1.125rem]">
          Text Here
          </span>
        </p>
      </div>
      <div class="bg-[#f4f4f4] border border-gray-detailBorder border-t-0 py-1.25 px-0.75 items-center text-center w-1/2 md:w-full">
        <p>
          <span class="block font-semibold text-[1.75rem] leading-9 text-blue" id="costs-students-awarded-grants-percent">
            PH%
          </span>
          <span class="mt-0.5 block font-medium text-sm leading-[1.125rem]">
          Text Here
        </span>
      </p>
    </div>
  </div>
</div>

    • 1

相关问题