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