文字底部对齐？

Question

如题？

情况1.

    <div style="width:300px;height:100px;">

        <div style="width:200px;height:30px;float:left;font-size:20px;">文字1</div>

        <div style="width:200px;height:80px;float:left;font-size:50px;">文字2</div>

    </div>

情况2

 <div style="width:1440px;" class="clearfix"><!--清除浮动了-->

        <div style="width:200px;height:30px;float:left;font-size:20px;">文字1</div>

        <div style="width:200px;height:80px;float:right;font-size:50px;">文字2</div>

    </div>

情况3

如何在情况2中，并且不知道div的height的值的时候让文字底部对齐，不能改变文字大小。

说明：

做标题和面包屑导航时候遇到的，列表页标题在左侧，面包屑导航在右侧。如何让他们的文字都在一条基线上。

Answer 1

<div style="width:1440px;  vertical-align: baseline" class="clearfix"><!--清除浮动了-->    <div style="width:200px;height:30px;float:left;font-size:20px; line-height: 80px">文字1</div>    <div style="width:200px;height:80px;float:right;font-size:50px; background:red;">文字2</div></div>这样的可行？