当下面的文字高度相同(在一行上)时,我的苹果排队很好。但是在我的第二行苹果中,当我将文字放在下面的两行或更多行时,苹果会跳起来。即使下面的文字高度不同,我如何让苹果排成一行。
请参阅我的jfiddle:http://jsfiddle.net/S9XR6/2/
<div id="wrapper-icons">
<div class="icons_row">
<div class="icons_cell1">
<img alt="" height="106" src="http://upload.wikimedia.org/wikipedia/commons/0/07/Honeycrisp-Apple.jpg" style="display:block; margin:0 auto;" width="106" />
<p class="rtecenter">Name 1<br />
Title 1</p>
</div>
<div class="icons_cell2">
<img alt="" height="106" src="http://upload.wikimedia.org/wikipedia/commons/0/07/Honeycrisp-Apple.jpg" style="display:block; margin:0 auto;" width="106" />
<p class="rtecenter">Name 2<br />
Title 1</p>
</div>
<div class="icons_cell3">
<img alt="" height="106" src="http://upload.wikimedia.org/wikipedia/commons/0/07/Honeycrisp-Apple.jpg" style="display:block; margin:0 auto;" width="106" />
<p class="rtecenter">Name 3<br />
Title 1</p>
</div>
<div class="icons_cell4">
<img alt="" height="106" src="http://upload.wikimedia.org/wikipedia/commons/0/07/Honeycrisp-Apple.jpg" style="display:block; margin:0 auto;" width="106" />
<p class="rtecenter">Name 4<br />
Title 1</p>
</div>
</div>
</div>
<div id="wrapper-icons">
<div class="icons_row">
<div class="icons_cell1">
<img alt="" height="106" src="http://upload.wikimedia.org/wikipedia/commons/0/07/Honeycrisp-Apple.jpg" style="display:block; margin:0 auto;" width="106" />
<p class="rtecenter">Name 1<br />
Senior VP / Chief Information Officer</p>
</div>
<div class="icons_cell2">
<img alt="" height="106" src="http://upload.wikimedia.org/wikipedia/commons/0/07/Honeycrisp-Apple.jpg" style="display:block; margin:0 auto;" width="106" />
<p class="rtecenter">Name 2<br />
Title 1</p>
</div>
<div class="icons_cell3">
<img alt="" height="106" src="http://upload.wikimedia.org/wikipedia/commons/0/07/Honeycrisp-Apple.jpg" style="display:block; margin:0 auto;" width="106" />
<p class="rtecenter">Name 3<br />
Title 1</p>
</div>
<div class="icons_cell4">
<img alt="" height="106" src="http://upload.wikimedia.org/wikipedia/commons/0/07/Honeycrisp-Apple.jpg" style="display:block; margin:0 auto;" width="106" />
<p class="rtecenter">Name 4<br />
Title 1</p>
</div>
</div>
</div>
#wrapper-icons {
position:relative;
width:100%;
border: none;
margin: 35px 0 0 0;
}
.icons_row {
height:100%;
white-space:nowrap;
}
.icons_cell1, .icons_cell2, .icons_cell3, .icons_cell4 {
height:100%;
width:25%;
display:inline-block;
white-space:normal;
padding-top:15px;
}