css - 一行上的不同字体大小和对齐方式

Question

我需要将两小段文字放在一行中。这两部分应分别左对齐和右对齐。这里 - http://jsfiddle.net/smithfarm/xa6jc0wm/ - 是实现这一目标的好方法:

<div id="textbox">
<p class="alignleft">left</p>
<p class="alignright">right</p>
</div>
<div style="clear: both;"></div>

.alignleft {
    float: left;
    text-align: left;
    width: 50%;
}
.alignright {
    float: left;
    text-align: right;
    width: 50%;
}

这很好，但我还需要其中一个具有不同的字体大小并且我需要两个部分都垂直对齐到“文本框”的底部。但是，当我更改字体大小时，这些部分会垂直对齐到顶部:http://jsfiddle.net/smithfarm/ucgs6s7c/1/

有什么想法吗？

Answer 1

行内 block 解决方案

您可以使用 display:inline-block 属性代替 float ，并控制 p 元素的垂直对齐。

由于内联 block 在元素之间产生了一些额外的空间，您必须将父级的字体大小设置为 0，然后为子级提供不同的大小...

#textbox{
    font-size:0;
    vertical-align:bottom;
}
#textbox *{font-size:1rem;}
.alignleft {
    text-align:left;
    width: 50%;
    display:inline-block;
}
.alignright {
    text-align:right;
    width: 50%;
    display:inline-block;
}

这是一个fiddle用那个CSS