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. ASP.net如何保证EF操作类线程内唯一

    说到线程内唯一,肯定会想到单例模式,但是如果多用户访问网站就会出现问题.ASP.net中有两种方法可以保证EF操作类线程内唯一(目前只会这两种,以后有好的方法再添加): 1.httpcontext(实 ...

  2. oracle游标透彻详解分析

    主:本文来自:http://www.cnblogs.com/huyong/archive/2011/05/04/2036377.html 4.1 游标概念 4.1.1 处理显式游标 4.1.2 处理隐 ...

  3. 【Spring】简单的Spring AOP注解示例

    引入相关包: <properties> <spring.version>3.0.5.RELEASE</spring.version> <aspectj.ver ...

  4. Excel通过身份证获取出生年月，性别，年龄，生肖，星座，省份等信息总结归纳

    Excel通过身份证获取出生年月,性别,年龄,生肖,星座,省份等信息总结归纳 早期的身份证号码为15位数字,现在使用的身份证号码为18位数字,它们的含义如下:(1)15位:1-6位为地区代码,7-8位 ...

  5. IMPORT FROM 表数据导入

    Syntax IMPORT FROM [<file_type>] <file_path> [INTO <table_name>] [WITH <import_ ...

  6. AFNetworking的POST上传

    - (void)download { // 1.创建网络管理者 // AFHTTPSessionManager 基于NSURLSession AFHTTPSessionManager *manager ...

  7. Asp.NET Visible属性与HTML display:none

    作为Asp.NET 程序猿,我们经常会遇到客户端HTML 元素与 WebPage Server端控件互操作的情景.如果没有很好的掌握两种技术的细节就很容易发生一些“莫名其妙的错误”. 我最近犯的一个错 ...

  8. TOEFL备考计划

    一.总则: 1.坚持每一天,充分利用一切可以利用的时间学英语.没有持之以恒的学习和大量的时将做保障,一切都是空谈. 2.每天听写一篇文章,以此文章为中心,展开一天的学习. OG, TOP 3.听说读写 ...

  9. 初学js/jquery 心得

    1.多个对象操作的时候可以放在一起,eg: $('.send_message, .friends_increment').blur(function() {}); 2.三元表达式与if else,eg ...

  10. 转：java怎么用一行代码初始化ArrayList

    java怎么用一行代码初始化ArrayList 您可以创建一个工厂方法: public static ArrayList<String> createArrayList(String .. ...