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. Mybatis select返回值为map时,选取表字段的两列作为key,value

    项目需要从ibatis升级到MyBatis,dao中有一个方法返回Map类型,具体是查询语句查询两个字段,将结果列表字段A的值作为key字段B的值作为value存入Map中作为结果返回: ibatis ...

  2. IIS报错：Exception from HRESULT: 0x8007000B解决方法

    报错如下: System.Web.Services.dll 中发生,但未在用户代码中进行处理 其他信息: 服务器无法处理请求. ---> 尝试加载 Oracle 客户端库时引发 BadImage ...

  3. HttpClient,DefaultHttpClient使用详解

    HttpClient:是一个接口 首先需要先创建一个DefaultHttpClient的实例 HttpClient httpClient=new DefaultHttpClient(); 发送GET请 ...

  4. win7安装oracle11g64位提示环境变量Path长度超出

    解决办法:安装包以管理员方式运行

  5. noi 6047 分蛋糕

    题目链接:http://noi.openjudge.cn/ch0405/6047/ 和Uva1629很类似,不过,可能用记忆化难写一点,状态初始化懒得搞了.就用循环好了. 状态描叙也可以修改,那个题目 ...

  6. libevent源码分析：http-server例子

    http-server例子是libevent提供的一个简单web服务器,实现了对静态网页的处理功能. /* * gcc -g -o http-server http-server.c -levent ...

  7. python utf-8 配置

    环境:centos6.5,python 2.6 源码文档使用utf-8 #!/usr/bin/python # -*- coding: UTF-8 -*- 字符串默认用utf-8(不用在前面加u了) ...

  8. PHP性状的使用

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

  9. Python3基础 列表之间+ 合并，不去除重复项

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  10. Bootstrap_列表组

     一.基本列表组 列表组是Bootstrap框架新增的一个组件,可以用来制作列表清单.垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件. <ul class="list-grou ...