Re: [問題] 如何讓文字切齊底部?
※ 引述《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
推
04/11 23:02,
04/11 23:02
→
04/11 23:02,
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
→
04/17 19:42, , 1F
04/17 19:42, 1F
討論串 (同標題文章)
完整討論串 (本文為第 2 之 2 篇):
問題
1
2