如何纵向和横向对齐两个具有不同字体大小的跨距

Question

我在段落中有两个不同字体大小的文本。我想相应地左右水平对齐它们。我还想在基线处垂直对齐它们。正如你在JSFiddle中看到的那样，我不能同时使用text-align和float来同时执行这两个操作。

html：

<p>
<span class="one">Something</span>
<span class="two">Something Else</span>
</p>

css：

p {
    border: 1px solid black;
}

p span {
    vertical-align: baseline;
}

.one {
    font-size: 2.0em;
}

.two {
    /* text-align: right; */
    float: right;
    font-size: 3.0em;
}

Answer 1

这样做的一种方法是使用 s = [] a = [] for i in range(len(new_list)): s = new_list[i] for j in new_list: a = s[:6] print a 属性，这可以证明内容是两行边距的单行段落。然后制作跨距text-align-last以防止跨距内的空间扩展。

inline-block

就是这样。没有浮动，没有文本对齐跨度。见fiddle。

另一种方法是使用柔性盒 请注意，当段落是flex时，p { border:1px solid black; text-align:justify; -moz-text-align-last:justify; text-align-last:justify; } p span { vertical-align:baseline; display:inline-block; } 不再有效，您需要使用vertical-align。然后在最右边的跨度上添加align-items的左边距，将其向右冲洗。

auto

见other fidde。

您想要使用哪种方法可能取决于您的受众群体。第一个版本不适用于旧版本的Chrome，它只在v35中定义。第二个在11以下的IE版本中不起作用。