两个跨度，一个左对齐，一个右对齐，两个都底部对齐

Question

I'm trying to put two spans in a div, one on each side, and both aligned to the bottom of the div, without using absolute positioning (since that ignores padding, etc and I always feel bad after resorting to it). The text in the right span is taller than in the left span. If I use vertical-align to position them, it doesn't take affect if they are both floated, however without them both being floated, they will not be horiziontally aligned properly. I don't have any guarantees on which of the two spans will have more text in it.

http://jsfiddle.net/gsvfn07f/

<div class="outer">
    <div class="inner"> 
        <span class="left">left</span>
        <span class="right">right</span>
        <div class="clearfix"></div>
    </div>
</div>


.outer {
    width: 40%;
    height: 200px;
    border: 1px solid red;
}
.inner {
    border: 1px solid green;
    padding: 5px;
}
.left {
    float: left;
    display: inline-block;
    vertical-align: baseline;
}
.right {
    float: right;
    font-size: 2em;
}
.clearfix {
    clear: both;
}

Answer 1

You can use line-height to get margin from top for your text.

This code seems to do what you want:

 .outer { width: 40%; height: 200px; border: 1px solid red; } .inner { height: 35px; width: 100%; border: 1px solid green; } .left { line-height: 48px; float: left; width: 50%; } .right { display: block; float: right; width: 50%; text-align: right; font-size: 2em; } 

 <div class="outer"> <div class="inner"> <span class="left">left</span> <span class="right">right</span> </div> </div>