html - CSS 动态最大宽度

Question

我正在用纸牌制作内存游戏，但我在居中时遇到了一点问题。打印的每张卡片为 192px x 192px，所有边的边距为 1.5px，因此 1 张卡片 = 192 + 1.5 + 1.5 = 195px 宽度。所有的卡片都显示为行内 block ，所以当没有足够的空间在一行中打印另一张卡片时，它会在下一张上打印。我现在遇到的问题是卡片组没有居中，因为卡片组的宽度超过了一排卡片的宽度。我基本上想将卡片组的 max width 更改为一排卡片的宽度。

例子:

在全尺寸窗口上，它连续显示 8 张卡片(= 1560 像素宽度)所以我想要

.card-deck {
  max-width: 1560px;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

在调整大小的窗口上，它连续显示 6 张卡片(= 1170 像素宽度)所以我想要

.card-deck {
  max-width: 1170px;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

那么有没有办法使用 CSS 使 max-width 属性根据一行中有多少张卡片而改变？类似于 max-width: card1-width + card2-width ...;。

提前致谢。

• 埃德

Answer 1

是的，像这样:

 .card-deck {
      position: absolute;
      left: 0;
      right: 0;
      margin-left: auto;
      margin-right: auto;
 }
 @media only screen and (max-width: 1170px) {
        .card-deck {
           max-width: 1170px;
        }
    }

 @media only screen and (max-width: 1560px) {
        .card-deck {
           max-width: 1560px;
        }
    }