Question

我正在创建一个战舰游戏，棋盘上有一个生成的网格，每个方格都是一个带数字的彩色框，并且是它自己的div。我遇到的问题是，当其中一个div获得一些额外的内容时，它会使得特定的div比div的其余部分更长，这会抛出整个网格。如果他们有额外的内容，我如何确保所有div都是相同的高度？我已经尝试将高度属性添加到CSS，但它不会改变彩色框的实际高度。

Answer 1

您必须定义如何处理溢出内容。

.cut-content {
    overflow: hidden;
}

Answer 2

答案是height。你可能会对抗特异性。请尝试以下方法：

.grid_div {
  height: 100px;
  height: 100px!important; /* if the previous does not work */
  max-height: 100px;
  max-height: 100px!important; /* if the previous does not work */
  overflow: hidden; /* just for the visual effect */
  display: inline-block; /* choose inline-block or block */
  display: block; /* choose inline-block or block */
}

如何使所有div具有相同的大小，无论它们是否有内容？

2 个答案: