将文本与引导面板底部对齐答案

【问题标题】：Align text to bottom of bootstrap panel将文本与引导面板底部对齐
【发布时间】：2019-01-22 17:54:06
【问题描述】：

我想让一些文本与bootstrap panel 中面板内容的底部对齐。（我使用的是引导程序 3.3.7）但是，使用

position: absolute;
bottom: 0;

将其与整个面板的底部对齐——位于页脚中。我希望它与面板内容 div 的底部对齐。但我不知道为什么会这样。

下面是正在发生的事情的图像，然后是我的面板 div 和“保存”样式的代码。我正在尝试将“保存”对齐到面板内容 div 的底部，但它进入了页脚。

      <div class="panel panel-default">
        <div class="panel-body editdiv my-textarea" contenteditable>
          Panel content
          <p class="savemet bottom">save</p>
        </div>
        <div class="panel-footer">
          <input type="text" class="poetic" placeholder="e.g. jealousy or loss">
          <div class="idea"></div>
        </div>
      </div>

...

  .bottom {
    position: absolute;
    bottom: 0;
  }

【问题讨论】：

请包含您对面板和内容的标记。

标签： html css twitter-bootstrap-3 vertical-alignment

【解决方案1】：

来自position: absolute的文档

绝对定位元素是其计算位置值是绝对或固定的元素。 top、right、bottom 和 left 属性指定元素包含块边缘的偏移量。（包含块是元素相对于其定位的祖先。）。

因此，您需要将 position: relative 放入您的 panel-content div。

【讨论】：

感谢您将我发送到文档。不幸的是，将position: relative 设置为panel-content div 不会改变任何东西。 :(
你可以自己决定包含块。它通常是父元素，或者是您希望元素相对定位到的块。你试过吗，例如bottom: 100px 而不是将其设置为 0？
哦！实际上你是对的，一旦我将panel-body 设置为position: relative 它就起作用了——我原以为课程是panel-content，这就是它不起作用的原因。谢谢！

【解决方案2】：

您必须给面板内容 div 一个相对位置，然后给您尝试放置的项目在底部绝对定位，并将该 div 或元素放置在面板内容 div 内。

【讨论】：