要实现如下内容的样式,即文字是竖向排列,并且如下图的35这个数字,要将其变成横向排列。
想要方案竖向排列,需要用到css3的writing-mode:vertical-rl;//即竖直广告,从右到左的方式
.qqbox-text{writing-mode: vertical-rl; /* 文字从上到下,从右到左 */}
但这样写一个奇怪的问题,就当中我们有一个35,我们要单独把这个数字区域拿出来,如下图,我们如果不把35这个数字单独设置,将出现如下的排版,则非常影响阅读体验。
所以,我们要把这个35数字,单独放在一个盒子里面,并且修改它的writing-mode属性,让其恢复正常即可。
这样就可以实现,文字竖排,并且数字横向,不影响阅读。
writing-mode属性,这在我们写古诗句的时候,非常有用。
horizontal-tb://默认模式,从左到右,从上到下
vertical-rl://从上到下,从右到左
vertical-lr://从上到下,从左到右