Question

我有一张桌子，放在div里面。此表有4个td元素，每个td元素内有3个div，从上到下堆叠。我的目标是将第三个div放置在表格底部。下面的CSS：

tr {
  height: 220px;
}

td {
  position: relative;
}

third-div {
  text-align: center;
  position: absolute:
  left: 0;
  right: 0;
  bottom: 0;
}

html image

它在Firefox和chrome中工作正常，但IE11中的bottom：0无法正常工作，我遇到了文字覆盖问题：（第三格中的数字为2000，未在表格底部设置） html rendered in IE

期望的是： html rendered in Chrome

我试图将高度设置为自动/ 100％，但没有用。我在开发人员工具中手动单击了bottom：0，它起作用了，2000降到了最低点。（不确定原因）。

Answer 1

html中div的类名称为third-div，但是您在CSS中使用3rd-div，并且缺少样式规则的选择器。我进行了如下演示，它可以在IE 11和Chrome中正常运行：

tr {
  height: 220px;
}

td {
  position: relative;
}

.third-div {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

<table class="table">
  <tbody>
    <tr>
      <td class="col-xs-3"></td>
      <td class="col-xs-3"></td>
      <td class="col-xs-3">
        <div>Amount Financed</div>
        <div>The amount of credit provided to you.</div>
        <div class="third-div">
          <span id="amount">$10,000</span>
        </div>
      </td>
      <td class="col-xs-3"></td>
    </tr>
  </tbody>
</table>

绝对位置bottom：0不能按预期在IE中工作

1 个答案: