Question

我用一些php和javascript做了一个记忆游戏，现在我在包装卡片时遇到了麻烦。请看下面链接中的图片。

图片：https://i.stack.imgur.com/ZNRph.png

.card-container {
      display: inline-block;
      width: 128px;
      heigth: 128px;
    }

 <div class="carddeck" id="carddeck">
      <div class="card-container">card</div>
      <div class="card-container">card</div>
      <div class="card-container">card</div>
      <div class="card-container">card</div>
      <div class="card-container">card</div>
      <div class="card-container">card</div>
      <div class="card-container">card</div>
   
    </div>

如您所见，卡片组的宽度（标记为蓝色）是屏幕的宽度（100％）。 CSS中是否有一种方法可以使卡片卡在卡片周围而没有没有卡片的空间（右侧）？

要想象我想要的东西，请看这个图像： https://i.stack.imgur.com/zjzhA.png

想象一下，卡片的宽度等于第二张图像中橙色线的宽度。很好地包裹时，我可以做一个简单的margin-left: auto;和margin-right: auto;来水平居中卡片。

提前致谢，

-Ed

CSS：用'inline-block'子句包装父div

0 个答案: