Html 使柱高度相同

我需要你的帮助。我想使过滤器部分与结果部分相同。然而，我有一个困难的时间如何使它在结果相同。我也一直在读关于

下面是我所做的代码。请注意，高度取决于“结果”窗格或“过滤器”窗格

#搜索所有tr td{
垂直对齐：顶部；
}
#搜索窗格{
背景：灰色；
}
#集装箱1{
浮动：左；
边框：1px实心；
}
#集装箱2{
浮动：左；
}
#可乐{
浮动：左；
宽度：160px；
背景：白色；
左侧填充：10px；
高度：计算（100%-54px）；
}
#可乐{
浮动：左；
宽度：20px；
/*背景：灰色*/
}
#col2 img{
宽度：18px；
高度：18px；
}
.FilterItem{
高度：30px；
线高：30px；
}
#可结{
宽度：300px；
边框：1px实心；
}
.ResultRow{
高度：30px；
线高：30px；
背景颜色：绿色；
字体大小：15px；
}

过滤器1
过滤器1
过滤器1
结果
结果
结果
结果
结果
结果

您的标记非常复杂，这将使样式设置变得更加困难；这里有一个简单的版本。（运行下面的代码段，或者查看此内容。）重要的部分是：一个div包含左侧内容，一个包含右侧内容，并且这两个div都设置为

display:table cell

。其父容器设置为

display:table。设置为
display:table cell
的同级元素将自动并排放置，无需包装。它们也将与它们的高度相匹配，因此两者都将与最高的内容物一样高

如果希望过滤器和行彼此垂直居中，可以将
vertical align:middle
添加到这些同级div或其父级div。否则，如您所见，它们默认沿顶部对齐其内容


.container{
显示：表格；/*重要*/
边框：1px纯色灰色；
}
.过滤器，
.结果{
显示：表格单元格；/*也很重要*/
宽度：200px；
}
.过滤器{
背景：白色；
}
/*其余的都是化妆品-
*如果需要，请更改这些样式*/
.filter、.result{
线高：2；
填充：0 10px；
}
.结果{
背景：绿色；
颜色：白色；
边框：1px纯白；
}

过滤器1
过滤器2
过滤器3
结果行
结果行
结果行
结果行
结果行
结果行
结果行