將div對齊到它們容器的底部

Question

我想這很簡單，我需要將兩個內部div（綠色和藍色）對齊到它們容器的底部（紅色）。我希望不使用絕對定位，我需要它是ie6,7,8 ff鉻的Safari瀏覽器兼容。

<div style="border:1px solid red;"> 
    <div style="border:1px solid green; width:20px; height:20px; float:left;"></div> 
    <div style="border:1px solid blue; width:20px; height:30px; float:left;"></div> 
    <div style="clear:both;"></div> 
</div> 

我試過使用vertical-align，但找不到一個簡單的解決方案。

感謝您的幫助，p。這裏

編輯是我在ABS的POS解決方案的嘗試：

<div style="border:1px solid red; position:relative;"> 
    <div style="border:1px solid green; width:20px; height:20px; float:left; position:absolute; bottom:0px;"></div> 
    <div style="border:1px solid blue; width:20px; height:30px; float:left; position:absolute; bottom:0px;"></div> 
    <div style="clear:both;"></div> 
</div> 

Answer 1

爲什麼你不能使用絕對定位？垂直對齊不起作用（表格除外）。讓你的容器的位置：相對。然後絕對使用bottom：0來定位內部div;應該像魅力一樣工作。

編輯由zoidberg（我會更新，而不是答案）

<div style="position:relative; border: 1px solid red;width: 40px; height: 40px;"> 
    <div style="border:1px solid green;position: absolute; bottom: 0; left: 0; width: 20px; height: 20px;"></div> 
    <div style="border:1px solid blue;position: absolute; bottom: 0; left: 20px; width: 20px height: 20px;"></div> 
</div> 

Answer 2

我不喜歡絕對定位，或者說，是因爲幾乎總是存在一些附帶損害，即意想不到的副作用。特別是當您使用響應式設計時。 似乎有另一種選擇 - 沙袋技術。通過在CSS的標記中插入「helper」元素，我們可以將元素推到容器的底部。例子見http://community.sitepoint.com/t/css-floating-divs-to-the-bottom-inside-a-div/20932。

Answer 3

你可以作弊！說你的DIV是20像素高，放置在div下一個容器的頂部，並設置

position: absolute; 
top: -20px; 

它可能不是語義乾淨，但確實與響應的設計

Answer 4

現代的方式擴展到這樣做是flexbox，在容器上添加align-items: flex-end;。

有了這個內容：

<div class="Container"> 
    <div>one</div> 
    <div>two</div> 
</div> 

使用這種樣式：

.Container { 
    display: flex; 
    align-items: flex-end; 
} 

https://codepen.io/rds/pen/gGMBbg