CSS 动态最大宽度 [英] CSS dynamic max width

问题描述

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

I'm making a memory game with cards and I got a little problem with centering. Each card that gets printed is 192px by 192px, with a margin of 1.5px for all sides, so 1 card = 192 + 1.5 + 1.5 = 195px in width. All of the cards display as inline-block, so when there is not enough space to print another card in one row, it prints it on the next one. The problem I am encountering right now is that the carddeck doesn't center because the width of the carddeck exceeds the amount of width that the cards of one row have. I basically want to change the max width of the card deck to the amount of width the cards of one row make.

示例:

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

On a fully sized window it displays 8 cards in a row (= 1560px width) so I want

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

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

On a resized window it displays 6 cards in a row (= 1170px width) so I want

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

So is there a way to make the max-width attribute change according to how many cards are in one row, using CSS? Something like 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;
        }
    }

这篇关于CSS 动态最大宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！