Re: [問題] 如何讓文字切齊底部?

看板Web_Design作者 (想找人聊天)時間17年前 (2008/04/17 01:12), 編輯推噓0(001)
留言1則, 1人參與, 最新討論串2/2 (看更多)
※ 引述《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,
h4 {background:省略; padding-left: 50px; height:40px;}
04/11 23:02

04/11 23:02,
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

04/17 19:42, , 1F
我覺得用張包含字的圖, 在以 FIR, 是最穩的方法了.
04/17 19:42, 1F
文章代碼(AID): #181ZDqxU (Web_Design)
文章代碼(AID): #181ZDqxU (Web_Design)