Question

对于学校项目，我需要做一些纸牌游戏。所以我试图把“手”放在上面，把“打牌”放在它们下面，但是它可以包含1张或者几张卡片，我只是无法理解我想要做什么。我有（我正在使用Bootstrap，如果这可以帮助）：

<div class="row">
    <div id="hand" class="text-center">
        <img class="img-hand" src="../img/dos_carte.jpg">
        <img class="img-hand"  src="../img/dos_carte.jpg">
    </div>
    <div id="played" class="text-center">
        <img class="img-played" src="../img/1-guard.jpg">
        <img class="img-played" src="../img/7-countess.jpg">
    </div>
</div>

和CSS

.text-center {
 text-align:center
}
.img-hand{
  height: 80%;
  width: 20%;
  display:inline-block;
}
.img-played{
  height: 100%;
  width: 25%;
  display: inline-block;
}

当有相同数量的牌时，这段代码工作得很好，但是当我尝试像1手牌+ 2牌一样的东西时，它就不再居中了。当你玩太多牌时，我也希望这些卡能够缩小（x卡后总宽度应该相同）。

编辑：在这种情况下我的问题是我的div hand小于played当卡片数量较少时（可能保持比例或其他东西？），它不占全宽row

我真的希望我不要求太多

Answer 1

您可能需要使用js来影响图像的宽度，具体取决于每个框中的图像数量。应该很容易，因为你必须有卡数。

如果hand和played彼此相邻，您可能需要设置其宽度，使其无论两个方框中的卡数量相同（即col-sm-6 ）。

居中一个未定义数量的图像

1 个答案: