`
touchinsert
  • 浏览: 1279921 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

文字纵向排列,不推荐使用,文字少的话尽量用图片会更方便

 
阅读更多


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.zx {width:32px; font-size:12px; font-family:"宋体"; float:left; background:#ccc; }
</style>
<title>无标题页</title>
</head>
<body>
<div class="zx">这是一个纵向排列的行</div>




<div>

这里是原来的设置,后来俺发现只用设上面那几项一就出得来
.in3 {
width:16px!important;
WIDTH: 20px;
padding:1px;
WRITING-MODE: tb-rl;


/*

  语法:writing-mode : lr-tb、tb-rl
参数:lr-tb:从左向右,从上往下 tb-rl:从上往下,从右向左

*/

TEXT-ALIGN: center;
float:left;
height:95px;
vertical-align: middle;
letter-spacing: 2px;
background-color:#CCCCCC;
font-size:12px;
}
</div>
</body>
</html>

效果如下图:

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics