CSS动态最大宽度答案

【问题标题】：CSS dynamic max widthCSS动态最大宽度
【发布时间】：2018-07-09 03:04:23
【问题描述】：

我正在用纸牌制作记忆游戏，但我在居中时遇到了一点问题。打印的每张卡片为 192 像素 x 192 像素，所有边的边距为 1.5 像素，因此 1 卡片 = 192 + 1.5 + 1.5 = 195 像素的宽度。所有卡片都显示为 inline-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;
}

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

提前致谢。

埃德

【问题讨论】：

标签： html css position width

【解决方案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;
        }
    }

【讨论】：

我是否还需要在每个“@media only screen”上提供（位置：--- to --- margin-right:) 还是只需要一次？
如果您认为正确，请标记为正确答案。
你给的答案没有用，刚刚试了一下。

【解决方案2】：

我找到了解决办法：

HTML：

<body onresize="carddecksize()">

Javascript：

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

【讨论】：

注意：这不是最好的解决方案，因为苹果的产品大多有不同的窗口大小系统。