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

看板Web_Design作者 (想找人聊天)時間18年前 (2008/04/11 12:52), 編輯推噓1(101)
留言2則, 1人參與, 最新討論串1/2 (看更多)
我有個網頁架構長得這樣: <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, , 1F
h4 {background:省略; padding-left: 50px; height:40px;}
04/11 23:02, 1F

04/11 23:02, , 2F
h4 span {position:relative; top:1em;}
04/11 23:02, 2F
文章代碼(AID): #17_kwHK1 (Web_Design)
文章代碼(AID): #17_kwHK1 (Web_Design)