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