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

Question

我试图在一个div中放两个跨度，每边一个，都与div的底部对齐，而不使用绝对定位（因为这忽略了填充等，我总是在使用它后感觉不好）。右跨度中的文本比左跨度中的文本高。如果我使用垂直对齐来定位它们，如果它们都是浮动的，就不会受到影响，但是如果它们都没有浮动，它们就不会正确地水平对齐。我不能保证两个跨度中的哪一个会有更多的文本。

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

您可以使用行高获取文本顶部的边距。

此代码似乎可以执行您想要的操作：

.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>