将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小提琴

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

我尝试使用display：inline-block;和vertical-align：bottom;

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/

Answer 2

你可以使用Jquery：http://jsfiddle.net/Z3KvU/3/

这样做

$('.positioned').each(function() {
$(this).css({
    top: $(this).parent().innerHeight() - $(this).innerHeight() + 'px'
});

}）;

它更兼容，但不太酷。