只有当所有文本都有文本或者没有文本时，并排div的工作？

Question

我试图将3个div并排放在div中。如果他们都有文字或没有文字，它对我有用。我想要做的只是让中间的人有文字，其他两个人都有图像。如果你从我的小提琴中的a2中删除文本，它将看起来很完美。

http://jsfiddle.net/nPeaV/7138/

<div id="a">
<div id="a1" >dd</div>
<div id="a2">dddd<p></p></div>
<div id="a3">d</div>

#a {
height: 118px;
width: 110%;
background-color: yellow;
overflow: hidden;

}
#a1 {
background-color: #F10B78;
width: 12%;
height: 108px;
background-color: red;
display: inline-block;
border: 2.5px solid #FFF5EE;
}
#a2 {


height: 108px;
background-color: pink;
width: 70%;
display: inline-block;
border: 2.5px solid #FFF5EE;
}
#a3 {
width: 12%;
height: 108px;
background-color: red;
display: inline-block;
border: 2.5px solid #FFF5EE;

}

Answer 1

小提琴：http://jsfiddle.net/nPeaV/7140/

您需要vertical-align: top，因为它们都是内联元素：

#a1, #a2, #a3 {
    vertical-align: top;
}

否则，带有文本的div将与其决定的当前基线对齐，即前一个inline-box的底部。