作者NelsonT (想找人聊天)
看板Web_Design
标题Re: [问题] 如何让文字切齐底部？
时间Thu Apr 17 01:12:18 2008
※ 引述《NelsonT (想找人聊天)》之铭言：
我有个网页架构长得这样:
<h4>
<span>一些测试文字一些测试文字一些测试文字一些测试文字</span>
</h4>
我希望达到的效果是，
在 span 的左侧会有个 50x40 的小图案，而 span 的文字底部会跟图案的底部切齐。
我用了以下的 CSS，可以在 Fx 跟 Opera 运作良好，
就算是多行显示的 span 文字也能切齐得很好。
h4 {
background: transparent url(
http://a.link.to.image.gif) no-repeat scroll
left top;
height: 42px;
display: table;
}
h4 span {
display: table-cell;
vertical-align: bottom;
padding-left: 55px;
}
可是这一招在 IE6 跟 IE7 行不通，不知道有何办法可以纯用 CSS 解决呢?
我无法更动 HTML 架构。
--
╭────────────────────╮
│我的网站改网址了：
http://nelson.csie.us/│
│我的网站改网址了：
http://nelson.csie.us/│
└────────────────────┘
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 220.133.134.243
1F：推 chph:h4 {background:省略; padding-left: 50px; height:40px;} 04/11 23:02
2F：→ chph:h4 span {position:relative; top:1em;} 04/11 23:02
谢谢 chph 的回应，
可是这样子的写法无法让 span 的文字底部跟图案的底部切齐。
就算我把 h4 span 设为 display: block; bottom: 0; 也不行。
请问各位，还有其他办法吗?
--
╭──────我在 PIXNET 的 Blog ─────╮
│
http://blog.pixnet.net/Nelson │
└─────────────────────┘
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 123.195.1.253
3F：→ andrew43:我觉得用张包含字的图, 在以 FIR, 是最稳的方法了. 04/17 19:42