Question

我有一个div，希望与表格的顶部边缘对齐。我通常可以将它们都放在一个包含div的表格中，但是表格与其父表格的右下角对齐。（为更好地说明这一点，我希望下面的代码片段中蓝色和黑色框的顶部彼此对齐。）

之所以要执行此操作，是因为表中有很多单元格，由于几个单元格每增加1个像素，表格只能以几像素的跳跃大小进行调整。如果有其他方法可以做到这一点，那么也可以。

#container {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: red;
}

#myTable {
  position: absolute;
  right: 0;
  bottom: 0;
}

td {
  background-color: blue;
  height: 100px;
  width: 100px;
}

#myDiv {
  background-color: black;
  height: 50px;
  width: 50px;
}

<div id="container">
  <div id="myDiv">
  </div>
  <table id="myTable">
    <tbody>
      <tr>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

我想可能会有某种CSS事情来做到这一点，但是我一直没能找到它。抱歉，如果这真的很简单，我对CSS还是陌生的。

谢谢！

Answer 1

根据您的情况，以下几个选项可能适用：

让#myDiv是<td>的子代。
如果您知道<td>的高度并将其始终位于<table>的底部，则可以将#myDiv对准表格的底部（可能是某种对齐方式）偏移）。

除此之外，我认为您无法使用CSS做到这一点。您可能无法使用JavaScript。

如何将元素与与其父级底部相连的表的顶部对齐？

1 个答案: