Html 很难让图像以不同长度的内容排列在div中

当下面的文字高度相同（在一行上）时，我的苹果排列得很好。但在我的第二行苹果中，当我在下面放上两行或更多的文字时，苹果会跳起来。即使下面的文字高度不同，我如何让苹果排列成一行呢

看我的小提琴：

---

垂直对齐（适用于内联元素）的默认值为基线更多信息：

在单元格中添加内容时，基线会随着换行一起向下跳转，以便其他单元格向下跳转

要防止这种情况，请添加

垂直对齐：顶部到
.incon单元格
s，这样它们就不会往下跳


                <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;
}