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="data:images/1.jpg"><span><i>北京</i></span></a></li>

               <li><a href=""><img src="data: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>

H5一行显示两个正方形的更多相关文章

  1. flex一行显示两列（CSS）

    外层display: flex;flex-wrap: wrap; 里层 width:49%

  2. Oracle一列的多行数据拼成一行显示字符

    Oracle一列的多行数据拼成一行显示字符   oracle 提供了两个函数WMSYS.WM_CONCAT 和 ListAgg函数.    www.2cto.com   先介绍:WMSYS.WM_CO ...

  3. tableview最后一行显示不全

    最后一行显示不全是因为表格的高度大于了控制view的高度,减小表格的高度小于的等于控制的view的高度即可

  4. [CareerCup] 7.5 A Line Cut Two Squares in Half 平均分割两个正方形的直线

    7.5 Given two squares on a two-dimensional plane, find a line that would cut these two squares in ha ...

  5. 多个div 一行显示的处理方式

    1.方式一: 通过div的float属性,定义宽度,然后定义float属性和width的属性,实现多个div在一行显示: 2.方式二: 通过div的display的属性,至少进行2成div的displ ...

  6. OpenCV show two cameras 同时显示两个摄像头

    用OpenCV同时显示两个摄像头的内容的代码如下: #include <iostream> #include <stdio.h> #include <tchar.h> ...

  7. 如何利用CSS代码使图片和文字在同一行显示且对齐

    对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...

  8. 只 一行显示可左右滚动的文本(UITextField中文限制)

    // // ViewController.m // 一行显示可滚动的文本 // // Created by apple on 15-5-8. // Copyright (c) 2015年 apple. ...

  9. Android GridView 一行显示数据（包括图片和文本），解决的办法是计算数据占该行的宽度是多少

    最近在做图片的浏览功能,开始是使用Gallery做,但是,达不到我想要的效果,关于使用Gallery显示缩略图的缺点和优点,不在详述了.以下是一个完整的Demo代码,注意我的模拟器是640*960. ...

随机推荐

  1. 【转】Android选项卡置底的方法

    转载地址:http://www.oschina.net/code/snippet_163910_6092 发现很多Android应用的选项卡 都是显示在页面底部的,网上有资料:通过反射获取TabWid ...

  2. Volley 实现原理图

    1.启动requestQueue 2. 添加请求 3. 启动cacheDispatcher 4.启动networkDispatcher 5. 数据分发

  3. solr 4.6的安装配置

    从网上看了很多资料,很多都是老的.自己也算是结合着弄出来了. 1.下载的准备工作 tomcat8.solr4.6   具体的下载自己去找去吧.或者后期我在提供. 2.开始配置 tomcat路径:E:\ ...

  4. asp.net 微信开发失效汇总

    1.验证控件 在Iphone 5以上版本不兼容(改为js验证)

  5. break continue return

    break 通常用在循环语句和开关语句中,当break语句用于do-while.for.while循环语句中时,可使程序终止循环而执行循环后面的语句, 通常break语句总是与if语句联在一起,即满足 ...

  6. PHP性状的使用

    <?php trait Geocodable{ /** @var string */ protected $address; /** @var \Geocoder\Geocoder */ pro ...

  7. Unity仪表盘显示UGUI制作小心得

    最近在做设备仪表参数参数显示,由于模型摆放位置经常修改,加之要求不能在模型的下面添加东西,显示界面的位置也不得不跟着修改,一来二去就烦了,想了解决办法,现在总结如下: 1.仍然在模型下面新建Panel ...

  8. 蚁群算法简介(part2: 蚁群算法之构造路径)

    蚁群算法主要可以分为以下几个步骤:首先,蚁群中的每只蚂蚁都根据地面上信息素浓度的大小找出一条从原点通向终点的遍历所有城市一次的路径(构造路径):然后每只蚂蚁沿着自己刚刚找到的路径回溯,在路径经过的各个 ...

  9. reactive-turtle

    reactive-turtle 标签(空格分隔): Scala Github 偶然在Github上看到一个有意思的小项目,一个粑粑教11岁的儿子学习scala,因为学习语法等太枯燥了,所以写了一个海龟 ...

  10. Codeforces 722C. Destroying Array

    C. Destroying Array time limit per test 1 second memory limit per test 256 megabytes input standard ...