html - 将 div 定位在容器底部

Question

我尝试在 div 中排列元素，我希望它们的底部边缘与 div 容器(粉红色容器)的底部对齐。我试图自己弄清楚一些东西，但我没有想出任何好的东西。

    <div style="background: pink; display:block; height: 180px; float:left; border: 1px solid black;">
    <div style="background: lightgreen; display:block; float:left; text-align: left; margin: 0; padding:0; width: 36%;">
    dasas sasad asdasda<br/>
    dsda dsadasd dasdasd<br/>
    dddddddwwww www<br/>
    zzzzzzzzZaaaaaaaaa 
    </div>
    <div style="background: skyblue;  display:block; float:left;  text-align: left; margin: 0; padding:0; width: 39%; ">
    sssssss sssssddddd<br/>
   xccccccc<br/>
    aaaaaaaaa  vvvvvv
    </div>
    <div style="background: yellow; display:block; float:left; text-align: left; margin: 0; padding:0; width: 25%;">
    uuuuuuu uuuuuu<br/>
    zzzzzzz  ddddddd
    </div>
  </div>

这是js fiddle

http://jsfiddle.net/Z3KvU/1/

以及我对 display: inline-block 的尝试；和垂直对齐:底部；

http://jsfiddle.net/H4EAT/

但结果与预期相去甚远

提前感谢所有建议 MTH

Answer 1

将此样式添加到容器中:

display:flex;
flex-flow: row nowrap;
align-items: flex-end;

Demo

请参阅这篇关于 flexbox 的精彩文章:http://css-tricks.com/snippets/css/a-guide-to-flexbox/