怎樣使幾個並排的塊級元素沿外框的底邊對齊？

02-06

不使用絕對定位能否做到？
----- update 2014-12-14 18:16:59 -----

原問題被閆凱很輕鬆地解答了，索性再追加一下評論中的問題：
若將下面的淡藍色div設為display:inline-block，且不設置vertical-align。如果淡藍色div內部都沒有內容的話，會自動對齊底邊；而如果都有內容的話就會對齊頂邊；如果一個有內容一個沒內容，則二者會上下錯開。請問這是什麼原理？

在現代瀏覽器中可以用 align-items: flex-end

補充一點鏈接吧。

發現很多問題還是重複性略高呢

設為inline-block的標籤和input並排放置為何會錯位？ - 前端開發

RD1016: 各瀏覽器對常用行內替換元素的 baseline 位置理解不同

設置綠色元素的display:inline-block;vertical-align:bottom;

看到問題更新了，那我也來更新下回答，一些個人理解，有不對的地方歡迎大牛來打臉~

首先我先說一下並不提倡用這種方式進行布局，因為vertical-align這個屬性在各個瀏覽器下表現都不太一樣，在低版本IE下還會出現一些詭異的情況，兼容性是個問題。。。所以說絕對定位還是這種問題的優先解決方案。

然後我解釋下上面問題的解決原理，給子元素div加上了display:inline-block;屬性是為了讓三個塊級元素並排顯示並且讓它們獲得了行內元素的特有屬性vertical-align屬性，這個屬性是可以設置行內元素的垂直對齊方式的，這時候把vertical-align設置為bottom會將該元素的bottom與相鄰元素對齊。

題主之後提出的這種情況是因為在塊級元素設置為inline-block後沒有設置vertical-align屬性，這個時候這個屬性並不是不存在，而是存在一個默認值baseline，相對於基線對齊，至於在元素內存在文字時和沒有文字時的基線就看圖吧

這個效果在不同瀏覽器下的顯示是不一樣的，例如Chrome下的情況：

更多關於display:inline-block和vertical-align的用法和屬性題主可以去w3cshool的css文檔查看

CSS vertical-align 屬性