|
|
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" />
<link rel="stylesheet" href="jquery.mobile-1.4.2.min.css" />
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.4.2.min.js"></script>
<style>
.fenduan{
text-align: center;
}
.ui-controlgroup{
margin-top: 10px;
width: 100% !important;
}
.ui-controlgroup-controls{
width: 100%;
}
.fenduan a{
width: 25% !important;
box-sizing:border-box;
}
.gallery img {
display: block;
height: auto;
width: 100%;
}
</style>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>麦田一角</h1>
<img src="header.jpg">
<div class="fenduan">
<div data-role="controlgroup" data-type="horizontal">
<a data-role="button" href="#suipai" date-transition="pop">随拍</a>
<a data-role="button" href="#" date-transition="pop">模拍</a>
<a data-role="button" href="#" date-transition="pop">作品</a>
<a data-role="button" href="#" date-transition="pop">风景</a>
</div>
</div>
</div>
<div data-role="content" >
<div class="ui-grid-a">
<div class="ui-block-a"><img src="01.jpg"><span>叶落深秋</span><a href="#" data-role="button">看大图</a><br>
</div>
<div class="ui-block-b"><img src="02.jpg"><span>古城残影</span><a href="#" data-role="button">看大图</a><br>
</div>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h4>个人摄影展，非商业展示</h4>
</div>
</div>
<div data-role="page" id="suipai">
<div data-role="header">
<h1></h1>
<div class="fenduan">
<div data-role="controlgroup" data-type="horizontal">
<a data-role="button" href="#suipai" date-transition="pop">随拍</a>
<a data-role="button" href="#" date-transition="pop">模拍</a>
<a data-role="button" href="#" date-transition="pop">作品</a>
<a data-role="button" href="#" date-transition="pop">风景</a>
</div>
</div>
</div>
<div data-role="content">
<p>随拍!</p>
</div>
<div data-role="footer" data-position="fixed">
<h4>个人摄影展，非商业展示</h4>
</div>
</div>
</div>
我是并列两排显示的，谁能帮我看看啊，为什么我放进去的图片，显示很大的，每一列都只能显一部分而已。怎么样才能把所有的图片都自动适应大小？
|
|
/1 
发表于 2015-2-10 13:01:01
收藏
转播
淘帖