2

我正在尝试并排放置 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;

}
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 回答