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. LA 5713 秦始皇修路 MST

    题目链接:http://vjudge.net/contest/144221#problem/A 题意: 秦朝有n个城市,需要修建一些道路使得任意两个城市之间都可以连通.道士徐福声称他可以用法术修路,不 ...

  2. MySQL中int类型的字段使用like查询方法

    方法参考自: http://stackoverflow.com/questions/8422455/performing-a-like-comparison-on-an-int-field 也就是使用 ...

  3. Using FreeMarker templates (FTL)- Tutorial

    Lars Vogel, (c) 2012, 2016 vogella GmbHVersion 1.4,06.10.2016 Table of Contents 1. Introduction to F ...

  4. jsp页面输出序号

    <c:forEach items="${tests}" var="test" varStatus="s"> <li> ...

  5. drupal 7在一个form新增或者修改一个字段

    例如在以下页面新增一个工号字段 在模块文件里面通过hook_form_FORM_ID_alter 函数修改,比如 图中的helloworld是模块名称,也就是你在哪个模块里面写这个函数那么名称就是什么 ...

  6. 从C++到GO

    从C++到GO 刚开始接触Go语言,看了两本Go语言的书,从c++开发者的角度来看看go语言的新特性,说下自己感触较深的几点: 并发编程 Go语言层面支持协程,将并发业务逻辑从异步转为同步,大幅提高开 ...

  7. Javascript中的队列

    队列遵循FIFO (First In First Out)原则. 普通队列 function Queue() { var items=[]; //向队列尾部添加一个或者多个元素 this.enqueu ...

  8. linux运行级别

    也许大家偶然会发现/sbin里有个init命令.你知道它是如何使用的吗? 如果你不喜欢使用图形登录方式,如何能够让用户在控制台下运行startx命令呢? 有时你要维护服务器,暂时不希望别的用户登录系统 ...

  9. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  10. 《构建之法》8&16

    [8.1] 对产品的生命周期管理好像一直以来都没有引起我足够的重视,在这一段对产品学习的过程中也少有看到相关内容.是因为针对不同产品而言,产品周期的管理太具有个性特征,没有太统一的规则可循吗?我觉得不 ...