CSS垂直对齐基线HTML标题

Question

我有两列标题，我希望与基线对齐，它们都是不同的字体大小。除此之外，我想要一个在左侧，一个在右侧。

如果您使用display: inline-block，则无论最大宽度如何，它们都与基线对齐。

HTML：

<div class="headings interior">
    <div class="headings-position">
        <h2 class="left heading">Heading</h2>
        <h3 class="right sub-heading">Heading with long text & Stuff</h3>
    </div>
</div>

CSS：

h2,h3 {
    margin: 0;
    display: inline-block;
    position: relative;
}
h2 {
    left: 0;
    bottom: 0
}
h3 {
    max-width: 100px;
    right: 0;
    bottom: 0;
    text-align:right;
}
.headings {
    position: relative;
    height: 200px;
    width: 500px;
    margin: 0 auto;
    border: 1px solid #000;
}

小提琴：http://jsfiddle.net/qgjttauq/

Answer 1

您需要将float: left用于h2而不是left: 0，将float: right用于h3而不是right: 0。

Fiddle

Answer 2

h3 {
    float: right;
    //additional styles
}