CSS如何将标题高度为2em与底部对齐

Question

我想创建一个垂直跨越1或2行的标题。我想通过底线对齐这些标题。我创建了一个jsfiddle页面来演示这个：

http://jsfiddle.net/S35Db/

HTML：

<h3>ABC</h3><h3>DEF JEH</h3>

CSS：

h3 {
float:left;
border: 1px solid grey;
padding:10px;
margin: 5px;
max-width:3em;
height:3em;

}

我想做的是将ABC与JEH对齐。我该怎么做呢？我是否需要在标题周围创建容器？

由于

Answer 1

您可以为第一个标题提供行高。

Fiddle

Answer 2

是的，你需要在它周围放一个容器。同时删除float元素并应用如下所示的table-cell属性。

div{display:table;height:3em;}

h3 {
border: 1px solid grey;
padding:10px;
margin: 5px;
max-width:3em;   
border: 1px solid grey;
height: 100%;
vertical-align: bottom;
display:table-cell;
}

DEMO

Answer 3

CSS：

h3 {
    float:left;
    border: 1px solid grey;
    padding:10px;
    margin: 5px;
    max-width:3em;
    height:3em;
}

.bottom {
    line-height:65px;
}

HTML：

<h3 class="bottom">ABC</h3>
<h3>DEF JEH</h3>

尝试这个我认为即。你需要什么。