html - 当一个单元格 div 包含绝对定位的 div 时，如何在表格 div 中顶部对齐两个单元格 div？

Question

当一个单元格 div 包含绝对定位的 div 时，如何在表格 div 中顶部对齐两个单元格 div？

在此示例中，不包含绝对定位的 div 的单元格 div 被下推。

HTML:

<div id="table">
  <div>
    <div>1 11 1</div>
  </div>
  <div>
    <div>
      <div id="rightIsOnTop">
        <div id="textThatIsBelow">textThatIsBelow</div>
        <div id="textThatIsOnTop">on top</div>
      </div>
    </div>
  </div>
</div>

CSS:

body, html {
  font-size:x-large;
  margin:0px;
  padding:0px;
}
#table {
  display: table;
  z-index: 5; /* So that other elements can be put above or below this. */
  position: relative; 
}
#table > div {
  display: table-cell;
}
#table > div > div {
  vertical-align:top;
  min-width:150px;
  margin:10px;
  background:grey;
}
#rightIsOnTop {
  position:relative;
  min-width:80px;
  overflow:hidden;
}
#textThatIsBelow {
  position: absolute;
  white-space:nowrap;
  display:inline-block;
}
#textThatIsOnTop {
  float: right;
  position:relative;
  display:inline-block;
  background:red;
}

它们是这样呈现的:

这是我希望它们呈现的方式:

谢谢你的帮助

Answer 1

您忘记将 vertical-align: top; 添加到您的单元格 div 而不是您的内容。

应该是

#table > div {
display: table-cell;
vertical-align:top;}

https://jsfiddle.net/xg7a38yd/1/