为什么第三个div影响其他两个div？

Question

我试图制作一个div表，但我的结果很烦人。

＆＃13;

＆＃13;

body {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  box-sizing: border-box;
}
.table-header {
  color: white;
  text-align: center;
  margin: 0;
  padding: 0;
  background-color: #646464;
}
.table-cell {
  background-color: yellow;
}
.short-cell {
  height: 25px;
}
.col1 {
  width: 15%;
  display: inline-block;
  text-align: center;
}
.col2 {
  width: 35%;
  display: inline-block;
}
.col3 {
  width: 48%;
  display: inline-block;
}
.response {
  border-width: 2px;
  padding: 0px;
  width: 98%;
  border-width: 0;
}

＆＃13;

<div class="table-header col1">Question #</div>
<div class="table-header col2">Question</div>
<div class="table-header col3">Response</div>
<div class="table-cell col1 short-cell">1</div>
<div class="table-cell col2 short-cell">Question goes here</div>
<div class="table-cell col3 short-cell">
</div>

＆＃13;

＆＃13;

＆＃13;

JSFIDDLE

在我的代码示例（最右下角的单元格）中添加最后一个div之前，事情看起来很不错：

但是一旦我添加了最后一个单元格，前两个单元格就会向下移动，我无法找出原因。

我正在运行最新的稳定Chrome（41）。

导致此移动的原因是什么？我如何修复它以使3表格div（最终更多行）显示在正确的行中？

Answer 1

  

10.8 Line height calculations: the 'line-height' and 'vertical-align' properties

     

＆＃39;内联块的基线＆＃39;是正常流程中其最后一个行框的基线，除非它没有流入的行框或者它的溢出＆＃39; property具有除＆＃39; visible＆＃39;之外的计算值，在这种情况下，基线是底边距边缘。

因此，您需要将vertical-align元素的.table-cell属性更改为默认值baseline以外的其他属性。

Updated Example

.table-cell {
    background-color: yellow;
    vertical-align: top;
}

---

在不更改vertical-align属性的情况下，请注意在向.col3元素添加文本时问题已得到解决。 (example)

同样，如果从所有元素中删除文本，问题也会得到解决。 (example)

这是因为最后一个.col3元素 与正常流程中最后一个行框的基线对齐（如上面的规范所述）。