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

内联块解决方案

而不是浮动，您可以使用display:inline-block属性并控制p元素的vertical.alignement。

由于inline-block在元素之间产生一些额外的空间，你必须将父级的font-size设置为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

单行上不同的字体大小和理由

1 个答案:

内联块解决方案