css - 如何为需要由也固定在底部的子 DIV 指定高度的父 DIV 编写 CSS？

Question

基本上，我希望外部 DIV 的高度由其内部 DIV 决定(特别是 left 和 right 内部 DIV)并且我希望任何内部 DIV 小于该高度锚定到外部 DIV 底部的高度。

草图:

+=============================================+
|                                   **********|
|                                   *  multi *|
|**********                         *   line *|
|*  text  *                         *   text *|
|**********                         **********|
+=============================================+

我不想指定外部 DIV 的高度，我希望它扩展到最高的内部 DIV。此外，虽然在某些情况下可能是左侧内部 DIV 需要锚定底部，右侧内部 DIV 指示高度，但在其他情况下，情况恰恰相反，左侧具有更高的内容，右侧需要锚定底部。

我的一个尝试是对内部 DIV 使用 float:left 和 float:right。这很好地相应地增加了外部 DIV 的高度，但我找不到任何方法来为较短的 DIV 进行底部锚定。

另一种尝试是对外部 DIV 使用 position:relative，对内部 DIV 使用 position:absolute bottom:0(一个是 left:0，另一个是 right :0)，但这只有在我给外部 DIV 一个固定高度而不是让它适应其内容时才有效。

这似乎是一件很容易的事情，我认为使用 TABLE 可以很容易地做到这一点，但我会不惜一切代价避免这种情况。

编辑:

根据 bookcasey 下面的最终建议，我能够在我的 DIV 元素上使用 display:table[-row|-cell] 实现我想要的，并且使用 vertical-align:bottom 和 text-align:[left|right] 就像使用表格一样。如...

<div style="display:table;width:100%;">
  <div style="border: 1px solid;display:table-row;">
    <div style="border: 1px dotted;display:table-cell;vertical-align:bottom;text-align:left;">
    text
    </div>
    <div style="border: 1px dotted;display:table-cell;vertical-align:bottom;text-align:right;">
    multi<br />line<br />text
    </div>
  </div>
</div>

Answer 1

我将一个表反向工程为 this .通过一些调整它可以工作。

div {display:table-row;}
p {display:table-cell; vertical-align:bottom; width:125px;}