html - 内联显示两个 div

Question

我需要在同一行上并排显示两个 div，但我不明白为什么第二个比第一个略低。

<div class="cont-title">
    <div class="triang-header"></div>
    <div class="h2-stripe">
        <h2 itemprop="name">
        Title
        </h2>
    </div>
</div>

这是CSS:

.cont-title{
    margin-right: -7px;
    min-width: 90%;
    max-width: 100%;
    height:51px;
    float:right;
    text-align:right;
    white-space: nowrap;
}

.triang-header{
    position:relative;
    width:39px;
    height:38px;
    display:inline-block;
    background:url('../images/titlebar.png') no-repeat top left;

}

.h2-stripe{
    position:relative;
    z-index:10;
    display:inline-block;
    text-align:left;
    background-color: #2A58AE;
    margin:0;
    height:38px;
    min-width:80%;
    line-height:38px;
    box-shadow: 2px 3px 5px 0 #555;
}

我做错了什么？

Answer 1

我想你没有计算行高，

.h2-stripe 的样式应该是这样的:

.h2-stripe{
    position:relative;
    line-height: 23px; // <----
    z-index:10;
    display:inline-block;
    text-align:left;
    background-color: #2A58AE;
    margin:0;
    height:38px;
    min-width:80%;
    box-shadow: 2px 3px 5px 0 #555;
}

这是一个 line-height:23px for .h2-stripe 的例子:http://jsfiddle.net/6a0ga3uq/