对齐div的底部

Question

我想知道在css中是否有一种方法可以将div与底部对齐。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

谢谢。

Answer 1

您可以在此处探索 x2 方法：

带有vertical-align: super

的

1） position: relative

1. 将元素position上的.ToolTip属性值更改为 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. 在position上保留absolute属性值.ToolTip，可以使用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>