我正在制作一张带记忆卡的记忆游戏，我的中心问题就出现了问题。每张打印的卡片为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 ...;之类的东西。
提前致谢。
是的，像这样：
.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：
<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';
}
}