如何取消对齐相邻表格单元的子对象？

Question

我的jsfiddle有div与display:table有2个子女display:table-cell。每个孩子都有不同的填充 ，但每个孩子内部的内容仍然对齐。有没有解决的办法？我想要child-two与表格单元格的左上角保持对齐，而不使用相对位置/绝对位置。那可能吗？

Answer 1

使用vertical-align：

.table-cell { 
    display: table-cell; 
    height: 100px; 
    width: 100px; 
    border: 1px solid #f00; 
    vertical-align: top; 

}

Answer 2

添加这个CSS：

.table-cell:nth-of-type(2) { 
    vertical-align: top; 
} 

https://jsfiddle.net/hpfye47v/1/