Question

我正在尝试使用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;}

或者您可以看到实时链接here.

Answer 1

使用vertical align

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

这应该是诀窍。

Answer 2

只是一个小想法..你试过flexbox吗？这真的是一种简单易行的方法。另外你可以使用position：absolute;列内（display:table和display:table-cell不允许）。

＆＃13;

* {
  box-sizing: border-box;
  line-height: 2;
}
main {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 1.25em 0em;
}
section {
  background-color: #ccc;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
aside {
  background-color: #ccc;
  margin-left: 20px;
  width: 40%;
}

＆＃13;

<main>
  <section>
    left column.<br>higher then the other
  </section>
  <aside>
    right column
  </aside>
</main>

＆＃13;

CSS表格显示奇怪

2 个答案: