2

div の中に 3 つの div を並べて配置しようとしています。それらすべてにテキストがあるか、どれにもテキストがない場合、それは私にとってはうまくいきます。私がやろうとしているのは、真ん中のものにテキストを持たせ、他の2つに画像を持たせることです. 私のフィドルで 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;

}
4

1 に答える 1

3

フィドル: http://jsfiddle.net/nPeaV/7140/

vertical-align: topそれらはすべてインライン要素であるため、必要です。

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

それ以外の場合、divテキストを含む は、現在のベースライン、つまり前の の下部であると判断したものに揃えられinline-boxます。

于 2013-08-11T07:49:05.777 に答える