对齐垂直顶部和底部的一些div [英] align divs vertically top and some on bottom

问题描述

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

I have three div elements to arrange vertically as follows

<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 on位于 td 底部的 td 和 .bottom 。

Here the height of .dynamic will change dynamically. So the height of the td will be changed.
I want to stick .top on top of td, and .bottom on bottom of td.

推荐答案

试试这个..

.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>

这篇关于对齐垂直顶部和底部的一些div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！