主页 / coding / 问题 / 79145637
Accepted
Alex Wright
Asked: 2024-11-01 00:54:09 +0800 CST

在 Tailwind CSS 框架中将屏幕尺寸更改为 lg 时，嵌套网格高度会异常变化

  • 772

我在项目中使用 Tailwind CSS。为了简单起见，我使用了 中的颜色divs。HTML 代码如下：

<div class="wraper mt-5 grid gap-4 grid-cols-1 lg:grid-cols-2">
    <div class="grid gap-4 w-full grid-cols-1 xs:grid-cols-2 my-4">
        <div class="relative flex justify-center w-full h-[30rem] bg-yellow-400">

        </div>
        <div class="relative flex justify-center w-full h-[30rem] bg-violet-500">

        </div>
        <div class="adv relative w-full xs:col-span-2 h-[10rem] bg-gray-700">

        </div>
    </div>
    <div class="grid gap-4 w-full grid-cols-2 lg:mt-4">
        <div class="w-full h-10 bg-red-600">

        </div>
        <div class="w-full h-10 bg-green-500">

        </div>
        <div class="test bg-orange-800 w-full h-20 col-span-2">

        </div>
    </div>
</div>

config我在文件中使用的断点系统是：

screens: {
  'xs': '428px',
  'sm': '576px',
  'md': '768px',
  'lg': '992px',
  'xl': '1200px',
  'xxl': '1400px'
},

输出为：

输出

如您所见，棕色元素与红色和绿色元素之间有很大空间（或间隙）。我不知道为什么会这样。此问题仅在 lg 屏幕尺寸中发生。在较小的屏幕尺寸下，一切正常。我的 HTML/CSS 代码有什么问题吗？

html

1 个回答

  1. Best Answer

    您已将高度应用于您提到的 div。

    你有h-10这么红应该是：

    <div class="w-full bg-red-600"></div>

    你有h-10绿色应该是：

    <div class="w-full bg-green-500"></div>

    你有h-20橙色应该是：

    <div class="test col-span-2 w-full bg-orange-800"></div>
    • 1

相关问题