您的位置:首页 > Web前端 > HTML5

H5如何实现一行三列布局

2016-05-10 16:20 465 查看
<!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="images/1_ssd.png"/></span>
<i>时速达</i>
</li>
<li>
<span style="padding-top: 0.230rem;"><img src="images/2_fl.png"/></span>
<i>福利</i>
</li>
<li>
<span style="width: 1.067rem; padding-top: 0.255rem;"><img src="images/3_tm.png"/></span>
<i>特卖</i>
</li>
<li>
<span style="width: 0.827rem"><img src="images/4_hfcz.png"/></span>
<i>话费充值</i>
</li>

<li>
<span style="width: 1.360rem"><img src="images/5_jtbj.png"/></span>
<i>家庭保洁</i>
</li>
</ul>

</body></html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: