HTML 表是否以某种方式定义为位于包含单元格的底部？

Question

我正在使用以下教程来改进我的一些布局并了解有关 CSS 显示属性的更多信息：https://www.sitepoint.com/solving-layout-problems-css-table-property/

信息看起来很简单，我试图将我的布局在一个特定的 <section> 中重新组织到一个这样的包装器中，在中间部分添加一个 Google 地图 <iframe>：

我当前网页的截图

正如您从屏幕截图中看到的，我在左右 CSS 单元格中使用的 HTML 表格粘在底部，而 iframe 粘在顶部，对于我的一生，我无法理解为什么。

我创建了一个新页面来首先通过精确复制 www.sitepoint.com 教程中的代码来对此进行测试。默认情况下，它的工作方式与示例完全相同：

精确代码匹配的片段

但是当我将段落包装在 HTML 表格中时，会发生相同的行为：

<table> 结构

中的段落片段

<table> 行为有什么我不明白的地方吗？为什么我的两个表格都不与 <iframe> 垂直排列？这三个 <div> 中的每一个都具有相同的 CSS：

.wrapper-cell {
display: table-cell;
width: 33.33%;
padding: 10px;
float: none;
}

None 它告诉数据垂直对齐的位置。我很困惑。清楚吗？

Answer 1

垂直对齐的默认值为基线。您的联系人和位置 table 的基线大致呈手波状，位于第一行第一行文本的底部。但是 iframe 的基线（显然）是它的底部边缘。请注意，Contact、Location 和 iframe 的底部对齐。

因此，将 table 单元格上的垂直对齐方式属性更改为其他内容，例如顶部或底部。

而且，是的，正如其他评论所说，post 你未来的完整 HTML 和 CSS。

Are HTML tables somehow defined to sit at the bottom of a containing cell?