JQuery Mobile 图片布局

JQuery Mobile 图片布局

1、实现效果

2、CSS 代码

/*  jQuery Mobile  图片列表，布局 */
.gallery {
  list-style: none;
  padding: 0;
  margin: 0;
}

.gallery:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

.gallery li {
  float: left;
  width: 33.33333333%;
}

.gallery li img {
  display: block;
  width: 100%;
  height: auto;
}

.gallery li a {
  display: block;
  margin: 5px;
  border: 1px solid #3c3c3c;
}

3、HTML 代码

　<ul class="gallery">
　　<li><a href="#"><img src="image/0.jpg"></a></li>
　　<li><a href="#"><img src="image/1.jpg"></a></li>
　　<li><a href="#"><img src="image/2.jpg"></a></li>
　　<li><a href="#"><img src="image/3.jpg"></a></li>
　　<li><a href="#"><img src="image/4.jpg"></a></li>
　　<li><a href="#"><img src="image/5.jpg"></a></li>
　　<li><a href="#"><img src="image/6.jpg"></a></li>
　　<li><a href="#"><img src="image/7.jpg"></a></li>
</ul>