JQuery Mobile 图片布局

来源：互联网发布：秋冬日系男装搭配知乎编辑：程序博客网时间：2024/05/21 14:56

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>

0 0