众所周知，元素有3种基本显示框类型，block块级，inline-block行内块级，inline行内。
inline-block是一种特殊存在，可以设置宽高也可以使元素在一行排列。这两种布局都可以用float:left来写，但是浮动完了还需要清楚浮动。所以可以直接把元素设置成inline-block同样可以自动排列
注意，写的时候一定要把文字固定高度，因为不固定的话，两种方法的布局都会出现形变。
借鉴原作者的写法，我有两种写法：
第一种：
设置每个col-25的宽度为25%，并设置他们为行内块元素，这会引起换行（因为每个行内元素外面会有间隙，所以会因为一行排满而换行），这就需要在外面的容器设置font-size: 0;
html：
<div class="container">
<div class="row">
<div class="col-25">
<img src="img/1.png" alt="" class="pic">
<p class="word">跟团游</p>
</div>
<div class="col-25">
<img src="img/2.png" alt="" class="pic">
<p class="word">自由行</p>
</div>
<div class="col-25">
<img src="img/3.png" alt="" class="pic">
<p class="word">邮轮</p>
</div>
<div class="col-25">
<img src="img/4.png" alt="" class="pic">
<p class="word">主题游</p>
</div>
</div>
<div class="row">
<div class="col-25">
<img src="img/5.png" alt="" class="pic">
<p class="word">签证</p>
</div>
<div class="col-25">
<img src="img/6.png" alt="" class="pic">
<p class="word">WIFI</p>
</div>
<div class="col-25">
<img src="img/7.png" alt="" class="pic">
<p class="word">预售</p>
</div>
<div class="col-25">
<img src="img/8.png" alt="" class="pic">
<p class="word">同程专线</p>
</div>
</div>
</div>
css：
body,
p {
padding: 0;
margin: 0;
}
body {
background: #ccc;
}
.container {
background: #fff;
}
.row {
/*1.去除子元素，因为设置行内块级inline-block产生的间隙*/
font-size: 0;
}
.row + .row {
margin-top: 5px;
}
.col-25 {
/* 2.设置行内块级 */
display: inline-block;
/* 3.设置宽度为1/4 */
width: 25%;
font-size: 12px;
text-align: center;
box-sizing: border-box;
padding: 0 20px;
}
.pic {
display: block;
width: 100%;
height: auto;
}
.word {
padding: 5px;
height: 18px;
line-height: 18px;
overflow: hidden;
/*4.设置元素超出隐藏*/
text-overflow: ellipsis;
/*5.设置超出样式为省略号*/
-webkit-line-clamp: 1;
/*6.设置2行应用省略*/
white-space: nowrap;
}
第二种：
html结构和第一种相同，下图可以看出，这两种写法效果是相同的。
它比第一种写法方便，利用弹性盒子，和box-sizing: border-box;里面图片自适应设备屏幕。
css：
body,
p {
padding: 0;
margin: 0;
}
body {
background: #ccc;
}
.container {
background: #fff;
}
.row {
/*1.使用弹性盒子布局，无需font-size:0;无需将子元素宽度设置width: 25%;*/
display: flex;
justify-content: space-around;
}
.row + .row {
margin-top: 5px;
}
.col-25 {
display: inline-block;
font-size: 12px;
text-align: center;
box-sizing: border-box;
padding: 0 20px;
}
.pic {
display: block;
width: 100%;
height: auto;
}
.word {
padding: 5px;
height: 18px;
line-height: 18px;
overflow: hidden;
/*2.设置元素超出隐藏*/
text-overflow: ellipsis;
/*3.设置超出样式为省略号*/
-webkit-line-clamp: 1;
/*4.设置2行应用省略*/
white-space: nowrap;
}
但这个方法因为没有把图片的宽度定下来，所以极端屏幕下（屏幕足够小），布局会有问题,如下图所示：
所以我个人推荐，还是使用第一种方法来写布局和样式。