html - 对齐 float 容器内的元素绝对底部(左右浮动)

Question

我想将文本与容器底部对齐。我知道我可以在容器上使用 position: relative; 和 position: absolute; bottom: 0; 在内部元素上完成此操作。但是，我有这样的 float 元素:

    float: left;                 .align-bottom (and also float: left)
++++++++++++++++++++++++++++++++++++++++++++++++
+     #blah                    |               +
+                              |               +
+ Title            btn1 btn2   | TEXT          +
++++++++++++++++++++++++++++++++++++++++++++++++

其中左侧的 float 元素具有非固定大小。

如何使用 CSS 和 HTML 将 TEXT 对齐到右侧容器的底部？

到目前为止我已经尝试过:

.align-bottom {
  /* the 2nd floated element, on right side */
  position: relative;
  overflow: auto;
  height: 100%;
}
.align-bottom div {
  position: absolute;
  bottom: 0;
}

CSSDesk:http://cssdesk.com/kNE98 (像 jsFiddle，但没有 JS)

我看到了一些有点相关的问题(虽然两个 float 容器不多)包括:Vertical Align with Absolute Positioning但这并没有多大帮助，因为 float 部分的高度相同。

Answer 1

因此，我在您希望高度相同的两列周围添加了一个父包装器，以及一个使包装器成为 float 元素的完整高度的 cf (clearfix) 类。然后我设置元素的宽度 (29%) 以使其恰好位于“左”div 的右侧。使用 position absolute 并将其设置为 bottom: 0 使其可以很好地放置。

这是带有正确代码的 cssdesk 链接:http://cssdesk.com/SjSFQ

问候