垂直排列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>

这里CCD_ 2的高度将动态变化。因此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>