對齊浮動容器內部的元素絕對底部（左側和右側浮動）

我想將文本與容器底部對齊。我知道我可以在容器上使用position: relative;，並且在內部元素上使用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）

我已經看到了一些問題有點關係（不是很多兩個浮箱雖然）包括：Vertical Align with Absolute Positioning但它沒有太大的幫助，因爲浮動部分的高度相同。

來源

2013-03-04 SuckerForMayhem

的問題是，你的100％的高度要帶父元素，這是''的整個高度 - 導致其高度延伸到視口的高度。如果我沒有弄錯，你是不是想把兩個浮動的柱子放在同一高度？如果你讓它們的高度相同，那麼'position：bottom'就可以工作。請記住：浮動容器的高度只與其內容一樣高。 – Terry 2013-03-04 22:26:55

因此，我添加了一個父包裝，圍繞你想成爲相同高度的兩列，以及一個cf（clearfix）類，它使得包裝成爲浮動元素的整個高度。然後我設置元素的寬度（29％），使它很好地坐在「左」格的右側。使用絕對位置並將其設置爲底部：0允許它坐得很好。

下面是正確的代碼cssdesk鏈接：http://cssdesk.com/SjSFQ

問候

來源

2013-03-04 22:38:49 Clayton

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

不檢入CSSDesk，因爲iframe的高度爲100％，它會將底部div發送到頁面的底部。但是通過這段代碼，div將會在body的底部。

來源

2013-03-04 22:35:56 MIIB

對齊浮動容器內部的元素絕對底部（左側和右側浮動）

回答

相關問題