0
我有两列标题,我想对齐的基线都是不同的字体大小。除此之外,我希望在左边和右边都有一个。CSS垂直对齐基线HTML标题
如果使用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/