<!DOCTYPE html>
<html>
<head></head>
<body>
<htmllang="en">
<metacharset="utf-8">
<title>Title</title>
<style>
*{margin: 0;padding: 0;}
.ru{
width: 100%;
height: 700px;
border: 5px #ADFF2F solid;
}
.tu>li{
list-style: none;
display: inline;
}
li>img{
width:487;
height: 200px;
margin-bottom:3px
}
}
</style>
<div class="ru">
<ul class="tu">
<li><img src="1.jpeg" alt="" /></li>
<li><img src="1.jpeg" alt="" /></li>
<li><img src="1.jpeg" alt="" /></li>
<li><img src="1.jpeg" alt="" /></li>
<li><img src="1.jpeg" alt="" /></li>
<li><img src="1.jpeg" alt="" /></li>
<li><img src="1.jpeg" alt="" /></li>
<li><img src="1.jpeg" alt="" /></li>
<li><img src="1.jpeg" alt="" /></li>
<li><img src="1.jpeg" alt="" /></li>
</ul>
</div>
</metacharset="utf-8">
</htmllang="en">
</body>
</html>
效果如下图
可根据 li>img 设置宽度来决定一行显示几张图片