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 
}