对齐 div 的底部

Question

我想知道css中是否有办法从底部对齐div。

我在复选框旁边有一个 div，该 div 的左上角在复选框的右上角旁边。但我希望 div 的左下角靠近复选框的右上角。

.ToolTip {
  position: absolute;
  display: inline-block;
  background: #fff;
  border: 2px solid black;
}

<span class="checkbox" style="display: inline-block">
  <input id="checkbox1" value="true" type="checkbox">
</span>
<span class="ToolTip">
  <div class="BlockLevelDiv">
    There is a table in the div
  </div>
</span>

如果我的问题不清楚，请问我一些问题，我的英语不流利。

谢谢。

Answer 1

您有 x2 种方法可以在这里探索：

1) vertical-align: super 和 position: relative

1. 将元素 .ToolTip 上的 position 属性值更改为 relative 从vertical-align 属性中受益；
2. 现在元素回到正常的文档流，并且由于 有问题的元素已经是一个内联块，声明 vertical-align: super

示例：

.ToolTip {
  position: relative;
  display: inline-block;
  background: #fff;
  border: 2px solid black;
  /* additional */
  vertical-align: super;
}

代码片段演示：

.ToolTip {
  position: relative;
  display: inline-block;
  background: #fff;
  border: 2px solid black;
  /* additional */
  vertical-align: super;
}

<span class="checkbox" style="display: inline-block">
  <input id="checkbox1" value="true" type="checkbox">
</span>
<span class="ToolTip">
  <div class="BlockLevelDiv">
    There is a table in the div
  </div>
</span>

2) 保留position: absolute 并使用bottom 属性进行偏移

1. 在.ToolTip上保留position属性值为absolute，元素位置可以通过bottom属性偏移；
2. 作为上述解决方案的要求，包含元素（绝对定位元素的）必须定位在relative 以保持定位相对到父 -否则，绝对定位的元素将相对于窗口定位。

示例：

.ToolTip {
  position: absolute;
  display: inline-block;
  background: #fff;
  border: 2px solid black;
  /* additional */
  bottom: 5px;
}

代码片段演示：

.ToolTip {
  position: absolute;
  display: inline-block;
  background: #fff;
  border: 2px solid black;
  /* additional */
  bottom: 5px;
}

.relative-container {
  position: relative;
}

<div class="relative-container">
  <span class="checkbox" style="display: inline-block">
    <input id="checkbox1" value="true" type="checkbox">
  </span>
  <span class="ToolTip">
    <div class="BlockLevelDiv">
      There is a table in the div
    </div>
  </span>
</div>