无法让图像在具有不同内容长度的div中排列

时间:2014-05-15 17:55:55

标签: html css

当下面的文字高度相同(在一行上)时,我的苹果排队很好。但是在我的第二行苹果中,当我将文字放在下面的两行或更多行时,苹果会跳起来。即使下面的文字高度不同,我如何让苹果排成一行。

请参阅我的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;
}

1 个答案:

答案 0 :(得分:2)

vertical-align的默认值(适用于内联元素)是基线更多信息:MDN

当您在单元格中添加内容时,基线会随着换行符跳转,以便其他单元格跳下来。

要防止这种情况,请将vertical-align:top;添加到.incon-cell,以免它们跳过。

<强> Demo