如竖着排列
<div>
<img src = "1.png" alt="">
</div>
<div>
<img src = "2.png" alt="">
</div>
<div>
<img src = "3.png" alt="">
</div>
横着排列：
<div>
<img src = "1.png" alt="">
<img src = "2.png" alt="">
<img src = "3.png" alt="">
</div>
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>demo</title>
</head>
<body>
<style type="text/css">
html,body,ul{ margin:0padding:0}
li{ list-style:none}
.pic-list{ width:500pxheight:500pxmargin:200px auto}
.pic-list li{ width:100pxheight:100pxfloat:left}
.pic-list li img{ width:100pxheight:100pxdisplay:block}
</style>
<ul class="pic-list">
<li><a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/sheying0708.jpg"></a></li>
<li><a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/bizhi0708.jpg"></a></li>
<li><a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/sheying0708.jpg"></a></li>
<li><a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/bizhi0708.jpg"></a></li>
<li><a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/sheying0708.jpg"></a></li>
<li><a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/bizhi0708.jpg"></a></li>
<li><a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/sheying0708.jpg"></a></li>
<li><a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/bizhi0708.jpg"></a></li>
<li><a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/sheying0708.jpg"></a></li>
<li><a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/bizhi0708.jpg"></a></li>
<li><a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/sheying0708.jpg"></a></li>
<li><a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/bizhi0708.jpg"></a></li>
<li><a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/sheying0708.jpg"></a></li>
<li><a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/bizhi0708.jpg"></a></li>
<li><a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/sheying0708.jpg"></a></li>
<li><a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/bizhi0708.jpg"></a></li>
<li><a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/sheying0708.jpg"></a></li>
<li><a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/bizhi0708.jpg"></a></li>
<li><a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/sheying0708.jpg"></a></li>
<li><a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/bizhi0708.jpg"></a></li>
<li><a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/sheying0708.jpg"></a></li>
<li><a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/bizhi0708.jpg"></a></li>
<li><a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/sheying0708.jpg"></a></li>
<li><a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/bizhi0708.jpg"></a></li>
<li><a href="#"><img src="http://img0.bdstatic.com/img/image/shouye/sheying0708.jpg"></a></li>
</ul>
</body>
</html>
把图片调小,然后设置:
background-repeat: repeat或者直接在css里设置背景图的大小:
background-size:50%这样背景图片就可以排成两列 了
