阶梯型的文字效果如何实现？
时间：2011-07-25
来源：互联网
html结构：
<div> <span>高大的文字</span> <span>矮小的文字</span><span>更矮小的文字</span></div>
要求：
比如，“高大的文字”是18px,”矮小的文字“是16px,"更矮小的文字"是14px，
如何让这些字体处于同一水平线上？
表格可以实现，但是其它方法就不好实现了。假如我要加入更大的字体，依然可以实现该效果，所以
外部包含框就不能设定高度了。
<div> <span>高大的文字</span> <span>矮小的文字</span><span>更矮小的文字</span></div>
要求：
比如，“高大的文字”是18px,”矮小的文字“是16px,"更矮小的文字"是14px，
如何让这些字体处于同一水平线上？
表格可以实现，但是其它方法就不好实现了。假如我要加入更大的字体，依然可以实现该效果，所以
外部包含框就不能设定高度了。
作者: nextstation 发布时间: 2011-07-25
<style> .fl{ float:left;} .lh30{ line-height:30px;} .f18{ font-size:18px; color:#F00;} .f16{ font-size:16px; color:#0F0;} .f12{ font-size:12px; color:#00F;} </style> <div> <span class="fl f18 lh30">高大的文字</span> <span class="fl f16 lh30">矮小的文字</span><span class="fl f12 lh30">更矮小的文字</span></div>
提示：您可以先修改部分代码再运行
提示：您可以先修改部分代码再运行
作者: porttix 发布时间: 2011-07-25
楼上的，你这效果不对，我可能意思描述不清楚。
文字的底部是处于同一水平线的。也就是底部对齐。
[ 本帖最后由 nextstation 于 2011-7-25 15:42 编辑 ]
文字的底部是处于同一水平线的。也就是底部对齐。
[ 本帖最后由 nextstation 于 2011-7-25 15:42 编辑 ]
作者: nextstation 发布时间: 2011-07-25
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读：74
-
如何安装mysql8.0
阅读：31
-
Word快速设置标题样式步骤详解
阅读：28
-
20+道必知必会的Vue面试题（附答案解析）
阅读：37
-
HTML如何制作表单
阅读：22
-
百词斩可以改天数吗？当然可以，4个步骤轻松修改天数！
阅读：31
-
ET文件格式和XLS格式文件之间如何转化？
阅读：24
-
react和vue的区别及优缺点是什么
阅读：121
-
支付宝人脸识别如何关闭?
阅读：21
-
腾讯微云怎么修改照片或视频备份路径?
阅读：28
