将文本对齐到引导面板的底部

Question

我想在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;
  }

Answer 1

摘自position: absolute

的文档

  

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

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

Answer 2

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