CSS表格显示异常

我试图使用CSS表格方法获得两列高度相同的内容。但是，由于某些原因，第一列在底部有额外的填充，第二列在顶部有额外的填充

我使用的代码与我通常使用的代码相同，在检查代码时无法找到问题的根源。我已经仔细检查了我的代码并查看了其他示例，但找不到这个问题的原因

我使用的代码是：

.archive-post{
    display:table;
    vertical-align: top;
    padding:20px 0px;}

.archive-post .left-column{
    display:table-cell;
    width:60%;}

.archive-post .right-column{
    display:table-cell;
    width:40%;
    padding-left:20px;}

或者，您可以看到使用的实时链接

---

这应该是个好主意。

只是个小主意。。你试过flexbox吗？这确实是一种简单易行的方法。另外你可以使用位置：绝对；在列内部（

display:table

和

display:table cell

不允许这样做）

*{
框大小：边框框；
线高：2；
}
主要{
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
填充：1.25em 0em；
}
部分{
背景色：#ccc；
-webkit-flex:1；
-ms-flex:1；
弹性：1；
}
旁白{
背景色：#ccc；
左边距：20px；
宽度：40%；
}

左列。
高于另一列
右栏

请在您的问题中包含所有相关代码以重新创建问题。链接是不合适的，因为如果该问题失效/问题得到解决，则该问题对其他用户没有什么价值。

.archive-post .left-column,
.archive-post .right-column {
      vertical-align: top;
}