html - 垂直对齐 div 顶部和底部

Question

我有三个 div 元素垂直排列如下

<table>
    <tr>
        <td>
            <div class="nb">
                <div class="top"></div>
                <div class="top"></div>
                <div class="bottom"></div>
            </div>
            <div class="dynamic">Height will change dynamically</div>
        </td>
    </tr>
</table>

这里.dynamic的高度会动态变化。所以 td 的高度会改变。
我想将 .top 放在 td 的顶部，将 .bottom 放在 td 的底部。

Answer 1

试试这个..

.nb {
  height: 1000px;
  position: relative
}
.top {
  float: top;
  width: 50px;
  background-color: grey;
  height: 50px;
}
.bottom {
  background-color: red;
  width: 50px;
  height: 50px;
  position: absolute; 
bottom: 0;
}

<table>
  <tr>
    <td>
      <div class="nb">
        <div class="top"></div>
        <div class="top"></div>
        <div class="bottom"></div>
      </div>
      <div class="dynamic">Height will change dynamically</div>
    </td>
  </tr>
</table>