Html Div中的图像问题(TailWind CSS中的网格)

发布于12月15日

如果你觉得这个问题很傻，我很抱歉，但我还是个新手.

所以下面是我的html，添加了TailWind的css类.

<div class="mx-auto max-w-7xl px-2 py-5">
  <div class="grid gap-6 grid-cols-3 ">
    <div class="col-span-2 row-span-2 rounded-lg bg-black">
      <img alt="Swimming Pool" src="...." class="rounded-lg" />
    </div>
    <div class="rounded-lg bg-sky-500/100">
      <img alt="Swimming Pool" src="...." class="rounded-lg" />
    </div>
    <div class=" rounded-lg  bg-sky-500/100">
      <img alt="Swimming Pool" src="...." class="rounded-lg" />
    </div>
  </div>
</div>

我目前正在使用CDN，以下是我的头段代码

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
</head>

Issue :我想要第一个图像与其他图像垂直对齐，我发现这个问题是因为"GAP-6"，如果我删除GAP图像是否正确对齐. 另外，我对div和img都使用了"四舍五入lg"类，对吗？或者，有没有其他 Select ？

有人能帮帮我吗

Html Div中的图像问题(TailWind CSS中的网格)

推荐答案

Html相关问答推荐

CSS复选框并排

如何将grid—template—column应用于元素中的子元素

使用无限数量的元素创建特定的CSS网格

邮箱追踪器-有效，但在Gmail客户端中是否可以显示问号图标以外的其他内容？

如何收集<；p&>元素下的<；p>；子元素

嵌套表列高度不是100%高度的问题

如何在将文本垂直居中的同时将文本右对齐？

Django中的图像未从静态显示

如何设计缠绕锚点元素的样式？

添加带有悬停动画的喜欢图标

如何消除线性渐变线的模糊？

CSS 中的 fingerprint scanner 动画

如何使我的下拉菜单响应？

弹出窗口溢出溢出：自动，我不明白为什么

隐藏在标题后面的下拉菜单

列宽等于最宽列宽度的无界容器

如何使用：hover zoom 重叠图像？

为什么我的动画会向 Moz Firefox 中的微调器添加人工制品？

如何将图像高度设置为等于文本高度？

如何在 about：blank 网站上设置页面标题