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>