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

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

您可以使用line-height 从顶部获取文本的边距。

这段代码似乎做你想做的事：

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