Question

使用CSS表，表格行和表格单元格的简单内容布局：

<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

采用“table-cell”的浏览器默认行为，通过垂直对齐继承，继承，中间。（在页面中奇怪的是底部）。

只需在CSS中添加“vertical-align:top”，即可确保修复您的情况。 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;
}

Answer 2

看起来与浏览器添加到<p>标记的边距有关，会自动尝试此操作...

div[style*="table-cell"] p:first-child {
  margin: 0;
}

什么打破了这个表布局？

2 个答案: