html - 去除垂直、交错和重叠的卡片堆之间的水平空间-6ren

html - 去除垂直、交错和重叠的卡片堆之间的水平空间

转载作者：行者123 更新时间：2023-11-28 02:23:21

我正在尝试移除 12 个垂直卡片堆之间的空白水平空间。我有按等级堆叠的卡片(即，所有 3 都很好地堆叠在一起，所有 4 都堆叠在一起，等等)。现在我只需要减少每堆之间的水平空间。不确定为什么 CSS Grid 会添加所有不需要的空间。

我尝试添加以下额外的 CSS 来进一步控制堆布局，但这只会让事情变得更糟:

div.three { grid-column-start: three;  grid-column-end: four;}
div.four { grid-column-start: four;  grid-column-end: five;}
div.five { grid-column-start: five;  grid-column-end: six;}
div.six { grid-column-start: six;  grid-column-end: seven;}
div.seven { grid-column-start: seven;  grid-column-end: eight;}
div.eight { grid-column-start: eight;  grid-column-end: nine;}
div.nine { grid-column-start: nine;  grid-column-end: ten;}
div.ten { grid-column-start: ten;  grid-column-end: jack;}
div.jack { grid-column-start: jack;  grid-column-end: queen;}
div.queen { grid-column-start: queen;  grid-column-end: king;}
div.king { grid-column-start: king;  grid-column-end: ace;}
div.ace { grid-column-start: ace;  grid-column-end: ace-end;}

请参阅https://jsfiddle.net/lenbo41/nvu5jyzt/4/

需要看到第 3 堆右边的第 4 堆，第 4 堆右边的第 5 堆，等等，堆之间没有大的空隙。

#p1-grid {
  display: grid;
  grid-template-columns: [three] 100px [four] 100px [five] 100px [six] 100px [seven] 100px [eight] 100px [nine] 100px [ten] 100px [jack] 100px [queen] 100px [king] 100px [ace] 100px [ace-end];
  grid-template-rows: [card1] 150px [card2] 150px [card3] 150px [card4] 150px [card5] 150px [card6] 150px [card7] 150px [row-end];
  grid-row-gap: 0px;
  grid-column-gap: 0px;
  background-color: beige;
  color: black;
  font-size: 20px;
  padding: 20px;
  max-height: 510px;
  max-width: 1920px;
}

div.card1 {
  position: relative;
  top: 0px;
  left: 0px;
  z-index: 11;
  background-color: red;
  opacity: 0.80;
}

div.card2 {
  position: relative;
  top: 40px;
  left: -100px;
  z-index: 12;
  background-color: orange;
  opacity: 0.80;
}

div.card3 {
  position: relative;
  top: 80px;
  left: -200px;
  z-index: 13;
  background-color: yellow;
  opacity: 0.80;
}

div.card4 {
  position: relative;
  top: 120px;
  left: -300px;
  z-index: 14;
  background-color: green;
  opacity: 0.80;
}

div.card5 {
  position: relative;
  top: 160px;
  left: -400px;
  z-index: 15;
  background-color: blue;
  opacity: 0.80;
}

div.card6 {
  position: relative;
  top: 200px;
  left: -500px;
  z-index: 16;
  background-color: darkblue;
  opacity: 0.80;
}

div.card7 {
  position: relative;
  top: 220px;
  left: -600px;
  z-index: 17;
  background-color: purple;
  opacity: 0.80;
}

<div id="p1-grid">
  <div class="three card1">3H</div>
  <div class="three card2">3D</div>
  <div class="three card3">3C</div>
  <div class="three card4">3H</div>
  <div class="three card5">3D</div>
  <div class="three card6">3C</div>
  <div class="three card7">3C</div>

  <div class="four card1">4H</div>
  <div class="four card2">4S</div>
  <div class="four card3">4C</div>
  <div class="four card4">4D</div>
  <div class="four card5">4S</div>
  <div class="four card6">4C</div>
  <div class="four card7">4D</div>

  <div class="five card1">5H</div>
  <div class="five card2">5D</div>
  <div class="five card3">5C</div>
  <div class="five card4">5H</div>
  <div class="five card5">5D</div>
  <div class="five card6">5C</div>
  <div class="five card7">5C</div>

  <div class="six card1">6H</div>
  <div class="six card2">6S</div>
  <div class="six card3">6C</div>
  <div class="six card4">6D</div>
  <div class="six card5">6H</div>
  <div class="six card6">6S</div>
  <div class="six card7">6C</div>

  <div class="seven card1">7H</div>
  <div class="seven card2">7H</div>
  <div class="seven card3">7C</div>
  <div class="seven card4">7H</div>
  <div class="seven card5">7H</div>
  <div class="seven card6">7C</div>
  <div class="seven card7">7C</div>

  <div class="eight card1">8H</div>
  <div class="eight card2">8S</div>
  <div class="eight card3">8C</div>
  <div class="eight card4">8D</div>
  <div class="eight card5">8S</div>
  <div class="eight card6">8C</div>
  <div class="eight card7">8D</div>

  <div class="nine card1">9H</div>
  <div class="nine card2">9D</div>
  <div class="nine card3">9C</div>
  <div class="nine card4">9H</div>
  <div class="nine card5">9D</div>
  <div class="nine card6">9C</div>
  <div class="nine card7">9C</div>

  <div class="ten card1">10H</div>
  <div class="ten card2">10S</div>
  <div class="ten card3">10C</div>
  <div class="ten card4">10D</div>
  <div class="ten card5">10S</div>
  <div class="ten card6">10C</div>
  <div class="ten card7">10D</div>

  <div class="jack card1">JH</div>
  <div class="jack card2">JD</div>
  <div class="jack card3">JC</div>
  <div class="jack card4">JH</div>
  <div class="jack card5">JD</div>
  <div class="jack card6">JC</div>
  <div class="jack card7">JC</div>

  <div class="queen card1">QH</div>
  <div class="queen card2">QS</div>
  <div class="queen card3">QC</div>
  <div class="queen card4">QD</div>
  <div class="queen card5">QH</div>
  <div class="queen card6">QS</div>
  <div class="queen card7">QC</div>

  <div class="king card1">KH</div>
  <div class="king card2">KD</div>
  <div class="king card3">KC</div>
  <div class="king card4">KH</div>
  <div class="king card5">KD</div>
  <div class="king card6">KC</div>
  <div class="king card7">KC</div>

  <div class="ace card1">AH</div>
  <div class="ace card2">AS</div>
  <div class="ace card3">AC</div>
  <div class="ace card4">AD</div>
  <div class="ace card5">AH</div>
  <div class="ace card6">AS</div>
  <div class="ace card7">AC</div>
</div>

最佳答案

将评论放入答案中 - 您正在使用相对定位将网格单元从它们的位置移动，从而堆叠卡片，这使得它棘手预测最终布局。你可以试试这个:

使用 column placement 规则，您已经为 div.three, div.four,..., div.ace,
将每个 div.card1、div.card2、...、div.card7 元素放入第 1、2 行,...,7 分别是，
使用 grid-auto-rows: 40px 而不是 grid-template-rows 并在 #p1-grid 上设置 150px 卡片高度> div 以获得所需的效果。

请看下面的演示:

#p1-grid {
  display: grid;
  grid-template-columns: [three] 100px [four] 100px [five] 100px [six] 100px [seven] 100px [eight] 100px [nine] 100px [ten] 100px [jack] 100px [queen] 100px [king] 100px [ace] 100px [ace-end];
  grid-auto-rows: 40px; /* default card row height */
  grid-column-gap: 10px; /* a column gap */
  background-color: beige;
  color: black;
  font-size: 20px;
  padding: 20px;
  max-height: 510px;
  max-width: 1920px;
}

#p1-grid > div {
  height: 150px; /* specify height of each card here */
}

/* row placement on each card */

div.card1 {
  position: relative;
  z-index: 11;
  background-color: red;
  opacity: 0.80;
  grid-row: 1; /* place in row 1 */
}

div.card2 {
  position: relative;
  z-index: 12;
  background-color: orange;
  opacity: 0.80;
  grid-row: 2;  /* place in row 2 */
}

div.card3 {
  position: relative;
  z-index: 13;
  background-color: yellow;
  opacity: 0.80;
  grid-row: 3; /* place in row 3 */
}

div.card4 {
  position: relative;
  z-index: 14;
  background-color: green;
  opacity: 0.80;
  grid-row: 4; /* place in row 4 */
}

div.card5 {
  position: relative;
  z-index: 15;
  background-color: blue;
  opacity: 0.80;
  grid-row: 5; /* place in row 5 */
}

div.card6 {
  position: relative;
  z-index: 16;
  background-color: darkblue;
  opacity: 0.80;
  grid-row: 6; /* place in row 6 */
}

div.card7 {
  position: relative;
  z-index: 17;
  background-color: purple;
  opacity: 0.80;
  grid-row: 7; /* place in row 7 */
}

/* column placement */

div.three { grid-column-start: three;}
div.four { grid-column-start: four; }
div.five { grid-column-start: five; }
div.six { grid-column-start: six; }
div.seven { grid-column-start: seven; }
div.eight { grid-column-start: eight; }
div.nine { grid-column-start: nine; }
div.ten { grid-column-start: ten;  }
div.jack { grid-column-start: jack;  }
div.queen { grid-column-start: queen;  }
div.king { grid-column-start: king; }
div.ace { grid-column-start: ace; }

<div id="p1-grid">
  <div class="three card1">3H</div>
  <div class="three card2">3D</div>
  <div class="three card3">3C</div>
  <div class="three card4">3H</div>
  <div class="three card5">3D</div>
  <div class="three card6">3C</div>
  <div class="three card7">3C</div>

  <div class="four card1">4H</div>
  <div class="four card2">4S</div>
  <div class="four card3">4C</div>
  <div class="four card4">4D</div>
  <div class="four card5">4S</div>
  <div class="four card6">4C</div>
  <div class="four card7">4D</div>

  <div class="five card1">5H</div>
  <div class="five card2">5D</div>
  <div class="five card3">5C</div>
  <div class="five card4">5H</div>
  <div class="five card5">5D</div>
  <div class="five card6">5C</div>
  <div class="five card7">5C</div>

  <div class="six card1">6H</div>
  <div class="six card2">6S</div>
  <div class="six card3">6C</div>
  <div class="six card4">6D</div>
  <div class="six card5">6H</div>
  <div class="six card6">6S</div>
  <div class="six card7">6C</div>

  <div class="seven card1">7H</div>
  <div class="seven card2">7H</div>
  <div class="seven card3">7C</div>
  <div class="seven card4">7H</div>
  <div class="seven card5">7H</div>
  <div class="seven card6">7C</div>
  <div class="seven card7">7C</div>

  <div class="eight card1">8H</div>
  <div class="eight card2">8S</div>
  <div class="eight card3">8C</div>
  <div class="eight card4">8D</div>
  <div class="eight card5">8S</div>
  <div class="eight card6">8C</div>
  <div class="eight card7">8D</div>

  <div class="nine card1">9H</div>
  <div class="nine card2">9D</div>
  <div class="nine card3">9C</div>
  <div class="nine card4">9H</div>
  <div class="nine card5">9D</div>
  <div class="nine card6">9C</div>
  <div class="nine card7">9C</div>

  <div class="ten card1">10H</div>
  <div class="ten card2">10S</div>
  <div class="ten card3">10C</div>
  <div class="ten card4">10D</div>
  <div class="ten card5">10S</div>
  <div class="ten card6">10C</div>
  <div class="ten card7">10D</div>

  <div class="jack card1">JH</div>
  <div class="jack card2">JD</div>
  <div class="jack card3">JC</div>
  <div class="jack card4">JH</div>
  <div class="jack card5">JD</div>
  <div class="jack card6">JC</div>
  <div class="jack card7">JC</div>

  <div class="queen card1">QH</div>
  <div class="queen card2">QS</div>
  <div class="queen card3">QC</div>
  <div class="queen card4">QD</div>
  <div class="queen card5">QH</div>
  <div class="queen card6">QS</div>
  <div class="queen card7">QC</div>

  <div class="king card1">KH</div>
  <div class="king card2">KD</div>
  <div class="king card3">KC</div>
  <div class="king card4">KH</div>
  <div class="king card5">KD</div>
  <div class="king card6">KC</div>
  <div class="king card7">KC</div>

  <div class="ace card1">AH</div>
  <div class="ace card2">AS</div>
  <div class="ace card3">AC</div>
  <div class="ace card4">AD</div>
  <div class="ace card5">AH</div>
  <div class="ace card6">AS</div>
  <div class="ace card7">AC</div>
</div>

关于html - 去除垂直、交错和重叠的卡片堆之间的水平空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55995183/

文章推荐： javascript - 保留 meteor 中禁用的输入

文章推荐： c++ - 如何在 C++ 中访问派生类中的变量？

文章推荐： c++ - 使用 DFS 检查无向图中的循环？

文章推荐： C++ find_if - 如何查找 ID (int(

Java对象数组错误(卡片)
让我们开始吧，3 个类(Card、Start、Deckofcards) 1° 卡: public class Card { private String type; private i
Java如何返回枚举值和名称(卡片)
我要创建一个二十一点游戏，我正在尝试弄清楚如何发牌并让它显示值和名称。我选择两个属性的原因纯粹是基于逻辑，当涉及到将 A 视为 1 或 11 时。还没有达到这一点，只是想如果有人想知道的话我会包括在内
默认情况下不展开 Twitter 卡片
我正在尝试使用 twitter 元标记(以及 Facebook 等其他网站的 Open Graph)创建 Twitter 卡片。当我看到来自其他人(例如 NPR 新闻)的推特提要时，卡片会默认展开。
Java PokerGame 卡片
我正在开发一个玩基本扑克游戏的程序，但这并不重要。我有一组 52 张牌，包含花色和等级。我想打印 4 行 13 行的值(花色和等级)。这可能是一个简单的问题，但我整天都在努力解决这个问题。因此，我非常
html - 具有相同高度和响应式的 Bootstrap 卡片
我开发了一个包含三列(两列相等，一列较小)的网格。我的问题是我无法在卡片上设置高度，我在 px 中使用了它们并且它起作用了，但这不是最好的方法。我希望这三列具有相同的高度(页面的 100%)并且一些卡
html - Bootstrap 卡片 - 卡片中的文字
我在 4 个不同的列中开发了 4 个 Bootstrap 卡。在每张卡片中，我创建了一张包含某种类型信息的新卡片。我的问题是，当我缩小屏幕尺寸(响应测试)时，文本会从卡片中溢出。我的问题是什么，我该
css - 具有垂直可滚动卡片文本的固定高度 Bootstrap 卡片
我怎样才能达到固定高度具有垂直可滚动的 bootstrap 4 卡卡片文字部分？ Card title This portion and
javascript - 将附件添加到 Trello 卡片
在我的程序中，我有一个大 Canvas ，我在其中提取多个选定区域并将这些区域绘制到单独的新小 Canvas 上。我想使用此 API 将新创建的 Canvas 作为附件发布到 trello POST
Android - 卡片 View 的动态大小
我想在卡片 View 中显示联系信息，如果需要，应该调整卡片 View 的大小以包含所有信息。这是布局部分: 但是 an
android - 卡片 View 阴影未显示
这是我的card_view。我已经提到了 card_view:cardElevation。但是仍然没有显示阴影。我搜索了很多链接。他们在任何地方都提到要使用 card_view:cardElevat
Android - 卡片 UI 框架
我正在使用此处的框架 - cardsui 如何在卡片顶部添加分享按钮。我已经使用点击方法在 xml 中实现了它，但是当我按下它时应用程序崩溃并说该方法不存在(是的，我将该方法添加到主 java 文件中
android - 卡片 View 之间的距离太大
我正在将 cardview 与 recycler view 一起使用。但早些时候我使用相同的代码来做事没有任何问题。但现在我正在使用 fragment 。现在我得到卡片 View 之间的距离更大。我的
android - 卡片 View 背景颜色影响阴影颜色
我的卡片 View 设置如下: android:layout_marginTop="2dp" android:layout_marginLeft="6dp" android:layout_margin
c++ - 对结构数组(卡片)进行排序
我正在制作一个二十一点游戏，并创建了一个数组来充当用户发牌的手牌。我希望能够对其进行排序，以便手按数字顺序排序，这样可以更简单地确定用户的手的类型。这是我的卡片结构: struct ACard{
html - 如何自动化 Twitter 卡片？
我希望在一个运行在 Wordpress 上的网站上实现 Twitter Cards(关于 Twitter Cards 的文档在这里:https://dev.twitter.com/docs/cards
html - Bootstrap 卡片/卡片列破坏
我需要帮助解决这个难题。在 bootstrap 4.1 中使用卡片列和卡片时，当我不想这样做时，行会中断。我将列数设置为 4，当有 4 张卡片时，它看起来很完美。当添加第五张牌时，它会将行分成顶部的
Android 卡片 View 在卡片之间有细灰线
我有一个 android ListView ，它显示类似卡片的 View ，正如您在这张图片中看到的，我的卡片之间有一条灰色细线: 我怎样才能摆脱灰线？我实现这个卡片 View 的xml是这样的:
java - 卡片 View 不可见
我正在尝试添加带有回收站 View 的卡片 View 。但它没有显示任何内容，只是一个空白 View 。我在这里看到了这方面的问题，它有为回收站 View 和卡片 View 添加依赖项的答案。这出现
android - 卡片 View 未显示
我在 android 中通过回收站 View 实现卡片 View ，但我的卡片 View 没有显示。我正在使用自定义适配器将数据填充到卡片 View 。我已经尝试了所有方法，但没有显示卡片 View
android - 卡片 View 缩放动画
在我的应用程序中，我有一个卡片 View ，其中包含一个 TextView 和一个按钮，该按钮最初是隐藏的，当单击卡片 View 时，会显示该按钮。我不知道如何在显示按钮时将其设置为动画。任何人都可以

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 去除垂直、交错和重叠的卡片堆之间的水平空间