Html 内联块元素未对齐

我有一些HTML看起来有点像这样：

<div style="display:inline-block;">
<h2>Heading 1</h2>
<table>
<tr><td>Some rows and data cells</td></tr>
</table>

<h2>Heading 2</h2>
<table>
<tr><td>Some more rows and data cells</td></tr>
</table>
</div>

<div style="display:inline-block;">
<h2>Heading 3</h2>
<table>
<tr><td>Last lot of rows and data cells</td></tr>
</table>
</div>

标题1
一些行和数据单元
标题2
更多的行和数据单元
标题3
最后一批行和数据单元

它的作用是使第三个表和标题显示在其他两个表和标题的右侧，这两个表和标题位于彼此的顶部，因此基本上有两列，前两个标题/表格在左侧，第三个标题/表格在右侧。问题是，使用此代码时，第三个标题与第二个标题对齐，第三个表格延伸到第二个标题下方。第三个标题应与第一个标题一致，或者至少第二部分中的信息应以与第一部分中的信息一致的方式居中

问题1：为什么第二个div的内容与第二个标题的顶部对齐，而不是与第一个div的顶部对齐，以及

问题2：如何使div正确对齐（并且不建议使用浮点）

---

小提琴：

您可以添加

垂直对齐：顶部到div。
使用
垂直对齐：顶部还删除内联元素之间的空白，这样块之间就不会有间隙。
.wrapper{
显示：内联块；
垂直对齐：顶部；
}

标题1
一些行和数据单元
标题2
更多的行和数据单元
标题3
最后一批行和数据单元
1。使用垂直对齐：顶部
2。删除空格bewteen divs（注意HTML注释）-您的代码执行它假定的操作，现在您只需将第三个块与垂直对齐顶部对齐，就完成了任务1：实际上它与基线对齐，在您的情况下，基线将成为第一个
div
的底部。