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. [linux系统]--搭建ftp服务器并且 创建用户 设置密码

    下面例子演示创建ftpuser 并且设置密码为ftpuser,ftpuser的目录为/root/ftpuser #!/bin/bash rpm -ivh vsftpd-2.2.2-21.el6.x86 ...

  2. js爬虫心得

    第一步:分析要爬的网站:包括是否需要登陆.点击下一页的网址变化.下拉刷新的网址变化等等 第二步:根据第一步的分析,想好爬这个网站的思路 第三步:爬好所需的内容 保存 爬虫过程中用到的一些包: (1)c ...

  3. easyUI跨Tab操作datagrid

    1.在datagrid那个页面定义方法 window.top["RELOAD_MY_DATAGRID"]=function(){ $("#dg").datagr ...

  4. esponse.sendRedirect方式的转向与RequestDispatcher的forward方法的比较

    esponse.sendRedirect方式的转向与RequestDispatcher的forward方法的比较 JavaWeb开发中,采用MVC模式的时候,在控制器完成模型的调用之后会选择界面对用户 ...

  5. Uva 11248 网络扩容

    题目链接:https://vjudge.net/contest/144904#problem/A 题意:给定一个有向网络,每条边均有一个容量.问是否存在一个从点1到点N,流量为C的流.如果不存在,是否 ...

  6. 磁盘IO

    基本概念: 在数据库优化和存储规划过程中,总会提到IO的一些重要概念,在这里就详细记录一下,个人认为对这个概念的熟悉程度也决定了对数据库与存储优化的理解程度,以下这些概念并非权威文档,权威程度肯定就不 ...

  7. Mybatis映射文件

    Mapper XML 文件 MyBatis 的真正强大在于它的映射语句,也是它的魔力所在.由于它的异常强大,映射器的 XML 文件就显得相对简单.如果拿它跟具有相同功能的 JDBC 代码进行对比,你会 ...

  8. word域1

    Description: 域是WORD中的一种特殊命令,它由花括号.域名(域代码)及选项开关构成.域代码类似于公式,域选项并关是特殊指令,在域中可触发特定的操作.在用WORD处理文档时若能巧妙应用域, ...

  9. static变量引起的问题，List数据覆盖

    出现的问题:Listt加载数据时,后面加载的数据会覆盖前面的数据,把后面的数据变得和前面一样 原因:因为刚开始把添加的数据写成了静态变量,所以一个改了以后所有都改了 解决方法:把数据设成普通属性,非静 ...

  10. repeater留言板[转]

    做了一个网站,其中的在线留言板块是用Repeater来显示留言的,这样可以用少的代码还实现多的功能,但是不知道怎么分页,要是留言过多就会使页面变的很长,能过查看众多网友的经验,知道用PagedData ...