html - 是什么打破了这个表格布局？

Question

使用 CSS 的表格、表格行和表格单元格 div 的简单内容布局:

<div style="display:table-cell; border:1px solid blue">
    some content  <!-- this line wrappend in <p> tag in next example -->
    <p>some content</p>
    ...
</div>

two column layout with a nested table on the right

上面的示例，但左侧单元格的内容放在段落(第一行)中:

above example but <p> breaking flow of the right table-cell

如您所见，在 <p> 之后标签放在左侧单元格中，右侧单元格向下移动。 我用<p>没关系或 <h1>标签。假设它确实改变了行高，并且相邻单元格中的第一行与其对齐。

任何人都可以解释这种行为。如何防止相邻单元格的移动？

Answer 1

它采用“表格单元格”的浏览器默认行为，将其垂直对齐以继承、继承、居中。 (奇怪的是在你的页面底部)。

只需将“vertical-align:top”添加到您的 CSS 中，肯定会解决您的问题。 jsFiddle forked here

例如，Firefox [用户代理 html.css]:

tr {
  display: table-row;
  vertical-align: inherit;
}
tbody {
  display: table-row-group;
  vertical-align: middle;
}
thead {
  display: table-header-group;
  vertical-align: middle;
}
tfoot {
  display: table-footer-group;
  vertical-align: middle;
}
/* for XHTML tables without tbody */
table > tr {
  vertical-align: middle;
}
td { 
  display: table-cell;
  vertical-align: inherit;
  text-align: inherit; 
  padding: 1px;
}