我尝试在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/

我的显示尝试:inline-block;垂直对齐:底部;

http://jsfiddle.net/H4EAT/

但结果远非预期

预先感谢所有建议
MTH

最佳答案

将此样式添加到容器中:

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


Demo



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

关于html - 将div定位在容器底部,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/22594905/

10-12 12:18
查看更多