div中元素的边距与display：table-cell移动其他单元格中的内容

Question

我有以下简单的布局：http://jsfiddle.net/656ckfyq/

  <div class="container">
        <div>
           Some jumping conten  here
        </div>
        <div>
            <a href="#" class="more">More</a>
        </div>          
   </div>

这些是它的样式

    .container {
        display: table;
        border: 1px silver solid;
     }

     .container div {
         display: table-cell;
         padding: 10px;
     }

    .more {
        display: block;
        border: 2px red solid;
        margin-top: 20px;
     }

所以问题是我想只移动第二个单元格20px中的链接。但不知何故，它也会影响第一个细胞中的内容。

那么这种行为的原因是什么？我该如何解决这个问题？

Answer 1

将vertical-align: top属性添加到table-cells：

.container {
  display: table;
  border: 1px silver solid;
}
.container div {
  display: table-cell;
  padding: 10px;
  vertical-align: top;
}
.more {
  display: block;
  border: 2px red solid;
  margin-top: 20px;
}

<div class="container">
  <div>
    Some jumping content here
  </div>
  <div>
    <a href="#" class="more">More</a>
  </div>
</div>