Question

我需要在同一行上一个接一个地显示两个div，但我不明白为什么第二个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;
}

这是一个行高的示例：.h2-stripe的23px：http://jsfiddle.net/6a0ga3uq/

Answer 2

你拼错了你的班级

.h2-strispe{
  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;
 }

应该是

.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 3

h2元素的边距会导致第二个div向下移动。此外，您应该垂直对齐内联块元素。请参阅此更新的代码段（也在CSS中使用更正的类名称。）

＆＃13;

.cont-title{
    margin-right: -7px;
    min-width: 90%;
    max-width: 100%;
    height:51px;
    float:right;
    text-align:right;
    white-space: nowrap;
}
.cont-title > * {
  vertical-align: middle;
}

.triang-header{
    position:relative;
    width:39px;
    height:38px;
    display:inline-block;
    background:url('http://placehold.it/39x38') no-repeat top left;
    margin: 0;
}

.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;
}
h2 {
  margin:0;
}

＆＃13;

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

＆＃13;

Answer 4

在第二个div中，你有行高和很多其他的东西。所以其他元素可以扩展你的div。如果您希望div与其他元素的大小相同，则应更改显示属性，如此

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

}

你可以看到我添加了box-sizing到border-box，这将保存div的位置，无论你对内部元素做什么

内联显示两个div

4 个答案: