使用display的優點：inline-block vs float：在CSS中保留通常情況下，當我們想要DIVs連續使用多個時float: left，但現在我發現了這個技巧display:inline-block示例鏈接在這里。在我看來，這display:inline-block是一個更好align DIVs的連續方式，但有任何缺點嗎？為什么這種方法不那么流行float呢？
3 回答
繁花不似錦
TA貢獻1851條經驗 獲得超4個贊
雖然我同意通常inline-block更好，但如果您使用百分比寬度來創建響應網格（或者如果您想要像素完美的寬度），還有一件事需要考慮：
如果您使用inline-block的是總寬度為100％或接近100％的網格，則需要確保HTML標記在列之間不包含空格。
對于浮點數，這不是您需要擔心的事情 - 列浮動在列之間的任何空格或其他內容上。這個問題的答案提供了一些很好的提示，可以在不使代碼變得丑陋的情況下刪除HTML空格。
如果由于任何原因您無法控制HTML標記（例如限制性CMS），您可以嘗試此處描述的技巧，或者您可能需要妥協并使用浮點數而不是內聯塊。還有一些丑陋的CSS技巧只能在極端情況下使用，比如font-size:0;在列容器上然后在每列中重新應用字體大小。
例如：
這是一個寬33.3％的3列網格
float: left。它“只是工作”（但需要清除包裝）。這是完全相同的網格
inline-block。塊之間的空白區域創建一個固定寬度的空間，將總寬度推到100％以上，打破布局并使最后一列下拉一條線。這是相同的網格，
inline-blockHTML中的列之間沒有空格。它“再次正常工作” - 但HTML更加丑陋，你的CMS可能會強制某種美化或縮進其HTML輸出，這使得現實難以實現。
- 3 回答
- 0 關注
- 1236 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消