[問題] CSS, 原來是baseline的問題

看板Web_Design作者 (潑潑)時間12年前 (2013/05/22 11:45), 編輯推噓1(1推 0噓 9→)
留言10則, 3人參與, 最新討論串1/1
剛幫朋友demo用jq做圖片捲軸的功能 像這樣：http://jsbin.com/aboyez/4/edit 但如果框內的圖片在5個以下時就會跑掉 所以我嘗試加了height，但出現了我預想以外的狀況 像這樣：http://jsbin.com/aboyez/13/edit 為什麼當高大於圖時﹙也就是框容得下圖時﹚離上面的距離就會跑掉？ -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 210.69.166.241
→
05/22 23:51, , 1F
因為 span 設了 inline-block ，即是放在一行裡的block
05/22 23:51, 1F
→
05/22 23:52, , 2F
就要考慮到 baseline ，因為 vertical-align 的預設值
05/22 23:52, 2F
→
05/22 23:52, , 3F
是 baseline
05/22 23:52, 3F
推
05/22 23:52, , 4F
img{ float: left; } 另外不建議使用inline-block
05/22 23:52, 4F
查了一下，不建議用inline-block的原因是因為browser支援度的關係對吧？
→
05/22 23:57, , 5F
然後往下移的不是div框，而是span的框(block)
05/22 23:57, 5F
→
05/22 23:58, , 6F
因為第一個span的baseline比較靠近中間，跟其他span
05/22 23:58, 6F
→
05/22 23:58, , 7F
切齊baseline，所以看起來就往下跳了，整個div被撐大
05/22 23:58, 7F
我還不太懂"第一個span的baseline比較靠近中間"是怎麼看的 不過經由你的解釋之後，我了解了在span下vertical-align:top;可以解決我的問題 非常感謝你 若你有時間的話再幫我解釋如何得知"第一個span的baseline比較靠近中間" ※ 編輯: Qiqi 來自: 210.69.166.241 (05/27 16:40)
→
05/27 22:12, , 8F
幫你找到 spec 了 http://goo.gl/vdLwN 最下面一行
05/27 22:12, 8F
→
05/27 22:13, , 9F
這個 demo 也可以看 http://goo.gl/cP1u
05/27 22:13, 9F
Thx ※ 編輯: Qiqi 來自: 210.69.166.241 (05/28 15:05)
→
05/28 19:19, , 10F
有點高級
05/28 19:19, 10F
‣ 更多 Qiqi 的文章
文章代碼(AID): #1Hd3zLFN (Web_Design)