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

Question

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

信息看起来很简单，我试图在一个特定的地方重新组织我的布局 <section>到一个这样的包装器中，添加一个谷歌地图 <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;
}

它没有告诉数据垂直对齐的位置。我很困惑。有没有清楚的地方？

Answer 1

垂直对齐的默认值是基线。 Contact 和 Location 表的基线大致呈手波状，位于第一行第一行文本的底部。但是 iframe 的基线(显然)是它的底部边缘。请注意，Contact、Location 和 iframe 的底部是对齐的。

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

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

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