在浮動容器內對齊元素的絕對底部（帶有左右浮動）

Question

我想將文本對齊到容器的底部。 我知道我可以使用position: relative; 在容器上，並且position: absolute; bottom: 0; position: absolute; bottom: 0; 在內部元素上實現這一目標。 但是，我浮動了以下元素：

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

左側浮動元素的大小不固定的情況。

如何使用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）

我已經看到一些相關的問題（盡管沒有兩個浮動容器），包括： 垂直對齊與絕對定位，但這並沒有太大幫助，因為浮動部分的高度相同。

Answer 1

body{position:relative}
.align-bottom {
  position: absolute;
  bottom: -50px;
}

不要在CSSDesk上簽入，因為iframe的高度為100％，並且會將底部div發送到頁面底部。 但是使用此代碼，div將位於主體的底部。

Answer 2

因此，我在希望具有相同高度的兩列周圍添加了一個父包裝器，以及一個cf（clearfix）類，該類使該包裝器成為浮動元素的完整高度。 然后，設置元素的寬度（29％），使其恰好位於“ left” div的右側。 使用絕對位置並將其設置為底部：0使其放置良好。

這是帶有正確代碼的cssdesk鏈接： http ://cssdesk.com/SjSFQ

問候