似乎无法让每个 div table 框具有相同的高度

Question

或多或少，在 table 到 CSS 和 div 上工作，并且大部分设置了它，除了由于某些原因高度不统一并且每个框都在变化。尝试了各种高度变化和命令，但没有成功。不确定问题是出在下面的 CSS 还是与其他一些 CSS 编码冲突。

CSS:

.collection{
    width:600px;
    border-collapse:collapse;
}
.collection td{
    padding:5px;
}
.collection-box{
    border-style:solid;
    border-width:2px 2px;
    border-color:#29FDF1;
    background: rgba(11, 14, 15, .65)
    height:100%;
    display:inline-block;
    padding:5px 5px;
}
.collection-innerbox{
    display:inline-block;
    background: rgba(11, 14, 15, .65)
    text-align:center;
    width:200px;
    height:200px;
}
.collection-text{
    text-align:center;
}

JSFiddle Full site's CSS on Pastebin

Answer 1

将 vertical-align 值更改为 top 并将 100% height 添加到主内部 div 并且它有效:)

.collection td { vertical-align: top; }
.collection-box { height: 100% }

Fiddle here

注意： 小心，您在这里的背景值后面忘记了一个逗号：

.collection-innerbox{
    display:inline-block;
    background: rgba(11, 14, 15, .65)
    text-align:center;
    width:200px;
    height:200px;
}

Answer 2

你已经足够接近了。你需要把边框放在 '.collection td' 而不是 '.collection-box'

.collection td {
    padding: 5px;
    border-style: solid;
    border-width: 2px 2px;
    border-color: #29FDF1;
    vertical-align: top;
}

如果您需要 space，

.collection td {
   vertical-align: top; 
  }
 .collection-box { 
   height: 100% 
  }

似乎无法让每个 div table 框具有相同的高度

Can't seem to get each div table box to have the same equal height

html

css

css-tables