折行文本末尾定位元素排版方案

说问题之前,先看一张图。

折行文本样图1

 

图中要求蓝色问号图标显示在文本末尾。

关于这个问题和app的同学讨论过,app同学表示实现有难度,让设计同学改了设计稿,将icon放到第一行文本后面,就如同第二行的“成人票”后面那样。

那么wap端能否实现这个效果呢,闭目思考下…

 

答案:能。

 

我们可以把icon直接写在文本后面,这样不就显示在行尾了么。

如果如此简单,app同学怎会轻易示弱,如果第二行只有icon(文字填满第一行),岂不是很难看。

那么我们绝对定位该icon到末尾。
.icon{position:absolute; right:-20px; bottom:0;}
然后我们希望这个元素能定位到我们想要的地方,那么我们希望这个元素的范围是这个样子的。

折行定位2

 

到此就比较明显了(虽然已开始我也没想到),只要设置该元素为内联属性(display:inline)就可以达到这样的效果了。

 

总结:虽然用了绝对定位,但从结构上来讲也还是合理的,主流浏览器都没问题,所以是个可行的方案。

最近看了《隐秘而伟大》,套用到这个问题上,inline虽然是行内元素的默认属性,但也有伟大的一面呀。

发表回复