最近做几个html页面,有的地方需要文字与图片同行,如果是iOS原生布局就很简单了,设置UIButton的titleEdgeInsets就可以了,html页面当时做的时候有点儿费劲,不过还好搞定了,记录一下,其实也很简单。

第一种. 文字图片同行排列,图片高度比文字小

  这种很常见,比如很多传统新闻页的更多:

更多
图1
<span class="more">更多</span>
span.more {
       padding: 0 20px 0 0;
       background: url(../../../img/index/img/allow_r2.png) right center no-repeat;
       font-size: 16px;
}                

  其实关键代码就两点:1.将图片allow_r2.png设置为span的背景 2.padding设置图片向右偏移的位置大小。但是这种情况只适用于allow_r2.png图片的高度小于文字的高度,否则图片显示不全。

第二种. 文字图片同行排列,图片高度比文字高

  当图片比文字高度高时,可以借助div按照上面的思路处理:

设计图
图2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="steps" class="bottomLine">
<div class="stepsDiv"><span class="commonSpan">步数</span></div>
<span class="numSpan">4</span>
<span class="commonSpan">千米</span>
</div>
.stepsDiv {
display: inline;
float: left;
background: url(img/sportStatistics_steps.png) left no-repeat;
padding: 0 0 0 30px;
background-size: 21px 22px;
margin-left: 24px;
}