vertical-align使用必须要有参照元素吗？？

Question

<div style="display:inline-block;height:100px;vertical-align:bottom;">
<span style="display:inline-block;height:20px;vertical-align:bottom;">文字</span>
</div>

这里为什么vertical-align不起作用？？除了用line-height和positon还有哪些办法可以居底？

Answer 1

vertical-align是同级之间的。你可以这样写

<div style="display:inline-block;height:100px;">
    <span style="display:inline-block;height:100px;vertical-align:bottom;"></span>
    <span style="display:inline-block;height:20px;vertical-align:bottom;">文字</span>
</div>

Answer 2

你也可以采用padding-top:80px或者margin-top:80px;强行把它挤压下去

Answer 3

verticla-align是参考相邻的兄弟节点的，你可以试下新弹性盒子

display: -webkit-box;
-webkit-box-align: end;

(注意兼容)

Answer 4

要说的 上面的诸位已经说了 还有就是vertical-align只对dispaly: inline和display: inline-block有效

Answer 5

这个是没法实现的用vertical-align:bottom，就你现在的结构来说。
<div style="display:inline-block;height:100px;vertical-align:bottom;">
</div>
<span style="display:inline-block;height:20px;vertical-align:bottom;">文字</span>
div和span同级。

------------给他们的父DOM设置vertical-align:bottom;。你试试这样的

<div style="display:inline-block;height:100px;vertical-align:bottom;">
<span style="display:inline-block;height:20px;vertical-align:bottom;">文字</span>
</div>
这种的。你给其中的span设置absolute，bottom：0;left:0;div设置relative