1）有时候一些图片会是正方形或者长方形，对于这样的图片一般都是居中显示到正方体内，代码如下：
.exhibition_list img{width:100%;position: relative;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%);-moz-transform:translateY(-50%);-webkit-transform:translateY(-50%);-o-transform:translateY(-50%);}
2）对于文字增多，如何显示在一行上也是常遇到的一个问题，后四个属性是必加的，代码如下：
.exhibition_list span{display: block;height: 2rem;line-height: 2rem;text-align: right;background: #000;color: #fff;position: absolute;bottom: 0;left: 0;opacity: .7;width: 100%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
3）现在很多H5页面都会有这样的UI效果图，两张正方形图片显示在一行，以下是代码显示，可以直接复制粘贴到你的html页面里面预览观看；
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta charset="UTF-8">
<title>我的profile</title>
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no" name="format-detection">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
<style type="text/css">
*{margin: 0;padding: 0;}
.box{height: 100%;}
.exhibition_list img{width:100%;position: relative;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%);-moz-transform:translateY(-50%);-webkit-transform:translateY(-50%);-o-transform:translateY(-50%);}
.exhibition_list li{width: 49.5%;margin-bottom: 1%;position: relative;background: #f00;}
.exhibition_list li:nth-child(odd){float: left;}
.exhibition_list li:nth-child(even){float: right;}
.exhibition_list span{display: block;height: 2rem;line-height: 2rem;text-align: right;width: 100%;background: #000;color: #fff;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;position: absolute;bottom: 0;left: 0;opacity: .7}
.exhibition_list span i{font-style: normal;padding-right: 0.6rem;}
</style>
</head>
<body>
<div class="box" id="box">
<ul class="exhibition_list">
<li><a href=""><img src="images/1.jpg"><span><i>北京</i></span></a></li>
<li><a href=""><img src="images/1.jpg"><span><i>邯郸</i></span></a></li>
<li><a href=""><img src="http://p3.so.qhimg.com/sdr/960_768_/t01fb9758151f5e91cd.jpg"><span><i>石家庄</i></span></a></li>
</ul>
</div>
<script type="text/javascript" src="http://static.17shihui.cn/libs/zepto/zepto.min.js"></script>
<script type="text/javascript">
//设置正方形图片
$(document).ready(function(){
var _width=$(".exhibition_list img").width();
$(".exhibition_list li").height(_width);
})
</script>
</body>
</html>
.exhibition_list img{width:100%;position: relative;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%);-moz-transform:translateY(-50%);-webkit-transform:translateY(-50%);-o-transform:translateY(-50%);}
2）对于文字增多，如何显示在一行上也是常遇到的一个问题，后四个属性是必加的，代码如下：
.exhibition_list span{display: block;height: 2rem;line-height: 2rem;text-align: right;background: #000;color: #fff;position: absolute;bottom: 0;left: 0;opacity: .7;width: 100%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
3）现在很多H5页面都会有这样的UI效果图，两张正方形图片显示在一行，以下是代码显示，可以直接复制粘贴到你的html页面里面预览观看；
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta charset="UTF-8">
<title>我的profile</title>
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no" name="format-detection">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
<style type="text/css">
*{margin: 0;padding: 0;}
.box{height: 100%;}
.exhibition_list img{width:100%;position: relative;top:50%;transform:translateY(-50%);-ms-transform:translateY(-50%);-moz-transform:translateY(-50%);-webkit-transform:translateY(-50%);-o-transform:translateY(-50%);}
.exhibition_list li{width: 49.5%;margin-bottom: 1%;position: relative;background: #f00;}
.exhibition_list li:nth-child(odd){float: left;}
.exhibition_list li:nth-child(even){float: right;}
.exhibition_list span{display: block;height: 2rem;line-height: 2rem;text-align: right;width: 100%;background: #000;color: #fff;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;position: absolute;bottom: 0;left: 0;opacity: .7}
.exhibition_list span i{font-style: normal;padding-right: 0.6rem;}
</style>
</head>
<body>
<div class="box" id="box">
<ul class="exhibition_list">
<li><a href=""><img src="images/1.jpg"><span><i>北京</i></span></a></li>
<li><a href=""><img src="images/1.jpg"><span><i>邯郸</i></span></a></li>
<li><a href=""><img src="http://p3.so.qhimg.com/sdr/960_768_/t01fb9758151f5e91cd.jpg"><span><i>石家庄</i></span></a></li>
</ul>
</div>
<script type="text/javascript" src="http://static.17shihui.cn/libs/zepto/zepto.min.js"></script>
<script type="text/javascript">
//设置正方形图片
$(document).ready(function(){
var _width=$(".exhibition_list img").width();
$(".exhibition_list li").height(_width);
})
</script>
</body>
</html>
浙公网安备 33010602011771号