内联块元素内的表格破坏了垂直对齐

Question

将表格放入内联块元素时，其旁边的内联块元素将向下移动，而不是将元素的顶部对齐。

HTML

<div>
    <table>
        <tr>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
        <tr>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
    </table>
</div>

<div>Element</div>
<div>Element</div>

CSS

div {
    display: inline-block;
    border: 1px solid #000;
}

结果

的jsfiddle

http://jsfiddle.net/dk39j/1/

为什么会发生这种情况，我该怎么办？

Answer 1

您需要设置vertical-align:top; 到旁边的div

的jsfiddle

Answer 2

您可以尝试以下方法：

DEMO

div {
display: inline-block;
border: 1px solid #000;
vertical-align:top;
}