Question

我试图将两个跨度放在一个div中，每边一个，并且两者都对齐div的底部，而不使用绝对定位（因为这会忽略填充等等，并且在使用它之后我总是感觉很糟糕）。右侧跨度中的文本高于左侧跨度中的文本。如果我使用vertical-align来定位它们，如果它们都是浮动的，它们就没有效果，但是如果它们都没有浮动，它们将不会正确地对齐。我不保证两个跨度中的哪个将包含更多文本。

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>

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

1 个答案: