Html 动态最大宽度

我在用纸牌做一个记忆游戏，我在定心方面有点问题。 每一张打印出来的卡片都是192px乘192px，每一面的边距为1.5px，因此1张卡片的宽度为192+1.5+1.5=195px。所有卡都显示为内联块，因此当没有足够的空间打印一行中的另一张卡时，它会在下一行打印。我现在遇到的问题是，卡片组不居中，因为卡片组的宽度超过了一行卡片的宽度。我基本上想将卡片组的

最大宽度
更改为一行卡片的宽度

例如：

在一个全尺寸的窗口上，它一行显示8张卡片（=1560px宽度），所以我想要

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

在一个调整了大小的窗口上，它一行显示6张卡片（=1170px宽度），所以我想要

.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

提前谢谢



是的，像这样：

 .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;
        }
    }

是的，像这样：

 .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;
        }
    }

我找到了解决办法：

HTML:

我找到了解决办法：

HTML:

我是否需要在每一个“@media only screen”上都给出（position:--to--margin right:”），或者我可以只给出一次？如果您认为正确，请将其标记为正确答案。您给出的答案无效，请立即试用。我是否还需要给出（position:--to--margin right:）在每一个“@media only screen”上，或者我可以只使用一次吗？如果您认为正确，请将其标记为正确答案。您给出的答案不起作用，请立即试用。注意：这不是最好的解决方案，因为苹果的产品大多具有不同的窗口大小系统。注意：这不是最好的解决方案，因为苹果的产品大多有不同的窗口大小系统。
function carddecksize() {
  var deck = document.getElementById("carddeck");
  if (window.innerWidth >= 1560) {
    deck.style.maxWidth = '1560px';
  }
  else if (window.innerWidth >= 1365) {
    deck.style.maxWidth = '1365px';
  }
  else if (window.innerWidth >= 1170) {
    deck.style.maxWidth = '1170px';
  }
  else if (window.innerWidth >= 975) {
    deck.style.maxWidth = '975px';
  }
  else {
    deck.style.maxWidth = '780px';
  }
}