前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

由灵签样式css3文字竖向排列遇到数字要横排的思路

要实现如下内容的样式,即文字是竖向排列,并且如下图的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://从上到下,从左到右


发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言