将div垂直对齐顶部,将一些对齐在底部

时间:2015-04-09 16:59:44

标签: html css

我有三个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底部。

1 个答案:

答案 0 :(得分: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>