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

Question

I have two spans with text of different font size inside a paragraph. I want to horizontal align them left and right accordingly. I also want to vertical align them at baseline. As you can see in this JSFiddle I cannot do both of them at the same time with text-align neither with 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

One way of doing this is to make use of the text-align-last property, which can justify the contents a one-line paragraph to both margins. Then make the spans inline-block to prevent the spaces inside the spans from expanding.

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;
}

And that's it. No floating, no text-aligning the spans. See fiddle .

An alternative approach is to use flex boxes.
Note that when the paragraph is a flex, vertical-align no longer works, you will need to use align-items . Then add a left margin of auto to the rightmost span to flush it to the right.

p {
   border:1px solid black;
   display:-webkit-flex;
   display:-moz-flex;
   display:flex;
   -webkit-align-items: baseline;
   align-items: baseline;
}

.one {
   font-size:2.0em;
}

.two {
   font-size:3.0em;
   margin-left:auto;
}

See other fidde .

Which approach you want to use may depend on your audience. The first one doesn't work in older versions of Chrome, where it has only been defined in v35. The second one doesn't work in IE versions below 11.