H5如何实现一行三列布局
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</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"/>
<link rel="stylesheet" type="text/css" href="css/mobile.common.css">
<style type="text/css">
.list_icons{ margin-top: 3.333333%; padding-left: 3.33333% }
.list_icons li{ width: 30%; background: #fff; float: left; margin: 0 3% 3% 0;border: 1px solid #dadfe9;padding-bottom: 0.900rem;}
.list_icons span{ display: block; width: 1.120rem; height: 1.355rem; margin: 0 auto; margin-top: 0.900rem; }
.list_icons i{font-size: 0.747rem; color: #4a4a4a; text-align: center; font-style: normal;display: block; padding-top: 0.500rem; margin: 0 auto;}
</style></head><body>
<ul class="list_icons clearfix">
<li>
<span style="padding-top: 0.230rem;"><img src="data:images/1_ssd.png"/></span>
<i>时速达</i>
</li>
<li>
<span style="padding-top: 0.230rem;"><img src="data:images/2_fl.png"/></span>
<i>福利</i>
</li>
<li>
<span style="width: 1.067rem; padding-top: 0.255rem;"><img src="data:images/3_tm.png"/></span>
<i>特卖</i>
</li>
<li>
<span style="width: 0.827rem"><img src="data:images/4_hfcz.png"/></span>
<i>话费充值</i>
</li> <li>
<span style="width: 1.360rem"><img src="data:images/5_jtbj.png"/></span>
<i>家庭保洁</i>
</li>
</ul> </body></html>
H5如何实现一行三列布局的更多相关文章
- DIV+CSS 网页布局之：三列布局
1.宽度自适应三列布局 三列布局的原理和两列布局的原理是一样的,只不过多了一列,只需给宽度自适应两列布局中间再加一列,然后重新计算三列的宽度,就实现了宽度自适应的三列布局. 同样的道理,更多列的布局, ...
- web标准(复习)--3 二列和三列布局
今天学习二列和三列布局,将涉及到以下内容和知识点 二列自适应宽度 二列固定宽度 二列固定宽度居中 xhtml的块级元素(div)和内联元素(span) float属性 三列自适应宽度 三列固定宽度 三 ...
- css常见的各种布局下----三列布局
css 三列布局,左右固定宽度右边自适应 1不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局 1.1.1 自适应部分一定要放第一个位子,使用浮动,并且设置宽度为100%,不设置浮动元素内容不 ...
- css三列布局之双飞翼pk圣杯
三列布局:两边定宽,中间自适应! 看到这个问题,我第一眼想的就是两边定宽float左右,中间加一个margin宽度自适应或者直接设一个overflow:hidden触发bfc机制,这样也可以,看上去也 ...
- CSS常用布局方式-两列布局、三列布局
CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...
- CSS三列布局
× 目录 两侧定宽中间自适应 两列定宽一侧自适应 中间定宽两侧自适应一侧定宽两列自适应三列自适应总结 前面的话 前面已经介绍过单列定宽单列自适应和两列自适应的两列布局.本文介绍三列布局,分为两侧定宽中 ...
- 简单的CSS网页布局--三列布局
三列布局其实不难,不过要用到position:absolute这个属性,因为这个属性是基于浏览器而言,左右部分各放在左右侧,空出中间一列来实现三列布局. (一)三列布局自适应 <!DOCTYPE ...
- css实现三列布局，左右固定值，中间自适应。
这里主要用到的是position:absolute;及margin属性;代码很简单,一看就明白. <!DOCTYPE html> <html lang="zh_CN&quo ...
- 三列布局，读《css那些事儿》
1.两列定宽,中间自适应 要点:浮动.负边距效果.mainbox增加内容div并设置margin.:after清除浮动 原理:mainbox的浮动并将其宽度设置为100%,次要内容及侧边栏设置固定宽度 ...
随机推荐
- mha配置参数详解
mha配置参数详解: 参数名字 是否必须 参数作用域 默认值 示例 hostname Yes Local Only - hostname=mysql_server1, hostname=192.168 ...
- Struts 笔记 内部资料 请勿转载 谢谢合作
Struts 概述 随着MVC 模式的广泛使用,催生了MVC 框架的产生.在所有的MVC 框架中,出现最早,应用最广的就是Struts 框架. Struts 的起源 Struts 是Apache 软件 ...
- tomcat7 日志设置为log4j
tomcat的日志设置用log4j的官方文档:http://tomcat.apache.org/tomcat-7.0-doc/logging.html 1. 下载tomcat-juli.jar, to ...
- 关于打印机能PING通但是无法打开\\地址的问题
首先PING地址,看是否能否PING通,如果不通,代表网络不通不能共享, 如果能PING通,但是无法打开\\地址,那么就就检查这几个地方: 1 防火墙是否关闭 2 print splooer 打印 ...
- js 方法封装实例
(function(){ if(windows.Mr_2_B){windows.Mr_2_B={};} function trim(txt){return txt.replace(/(^\s*|(\s ...
- Python3基础 访问列表 大于等于指定索引值的所有元素
镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...
- ACM HDU 2041--超级楼梯题解
超级楼梯 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
- JavaACOFramework的各个类介绍(part3 : Ant4ACS类)
package aco.ant; import java.util.ArrayList; import sys.Settings; import util.PseudoRandom; import a ...
- ChartControl 折线图 柱状图
添加折线图(柱状图) 拖动ChartControl到Form上 在Series Collection中添加Line(或Bar) DevExpress.XtraCharts.Series series1 ...
- T-SQL编程 —— 用户自定义函数(内嵌表值函数)
内嵌表值函数 接上 <T-SQL编程 -- 用户自定义函数(标量函数)> http://www.cnblogs.com/viusuangio/p/6212072.html 内嵌表值函数可以 ...