html - 将文本与引导面板底部对齐

Question

我想让一些文本与引导面板中面板内容的底部对齐。（我正在使用引导程序 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;
  }

标签： htmlcsstwitter-bootstrap-3vertical-alignment

Answer 1

从文档position: absolute

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

所以你需要把position: relative你的panel-contentdiv。