H5一行显示两个正方形

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 >

转载于:https://www.cnblogs.com/xiaoleidiv/p/5477944.html