Question

我正在制作一张带记忆卡的记忆游戏，并且我在中心方面遇到了一些问题。每张打印的卡片为192px×192px，所有边缘的边距为1.5px，因此1张卡片= 192 + 1.5 + 1.5 = 195px宽度。所有卡都显示为内联块，因此当没有足够的空间在一行中打印另一张卡时，它会在下一张卡上打印出来。我现在遇到的问题是卡片卡不居中，因为卡片组的宽度超过了一行卡片的宽度。我基本上想要将卡片组的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 ...;。

提前致谢。

版

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

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

CSS动态最大宽度

2 个答案: