使用display的優(yōu)點(diǎn)：inline-block vs float：在CSS中保留通常情況下，當(dāng)我們想要DIVs連續(xù)使用多個(gè)時(shí)float: left，但現(xiàn)在我發(fā)現(xiàn)了這個(gè)技巧display:inline-block示例鏈接在這里。在我看來，這display:inline-block是一個(gè)更好align DIVs的連續(xù)方式，但有任何缺點(diǎn)嗎？為什么這種方法不那么流行float呢？
3 回答
繁花不似錦
TA貢獻(xiàn)1851條經(jīng)驗(yàn) 獲得超4個(gè)贊
雖然我同意通常inline-block更好，但如果您使用百分比寬度來創(chuàng)建響應(yīng)網(wǎng)格（或者如果您想要像素完美的寬度），還有一件事需要考慮：
如果您使用inline-block的是總寬度為100％或接近100％的網(wǎng)格，則需要確保HTML標(biāo)記在列之間不包含空格。
對(duì)于浮點(diǎn)數(shù)，這不是您需要擔(dān)心的事情 - 列浮動(dòng)在列之間的任何空格或其他內(nèi)容上。這個(gè)問題的答案提供了一些很好的提示，可以在不使代碼變得丑陋的情況下刪除HTML空格。
如果由于任何原因您無法控制HTML標(biāo)記（例如限制性CMS），您可以嘗試此處描述的技巧，或者您可能需要妥協(xié)并使用浮點(diǎn)數(shù)而不是內(nèi)聯(lián)塊。還有一些丑陋的CSS技巧只能在極端情況下使用，比如font-size:0;在列容器上然后在每列中重新應(yīng)用字體大小。
例如：
這是一個(gè)寬33.3％的3列網(wǎng)格
float: left。它“只是工作”（但需要清除包裝）。這是完全相同的網(wǎng)格
inline-block。塊之間的空白區(qū)域創(chuàng)建一個(gè)固定寬度的空間，將總寬度推到100％以上，打破布局并使最后一列下拉一條線。這是相同的網(wǎng)格，
inline-blockHTML中的列之間沒有空格。它“再次正常工作” - 但HTML更加丑陋，你的CMS可能會(huì)強(qiáng)制某種美化或縮進(jìn)其HTML輸出，這使得現(xiàn)實(shí)難以實(shí)現(xiàn)。
婷婷同學(xué)_
TA貢獻(xiàn)1844條經(jīng)驗(yàn) 獲得超8個(gè)贊
如果要div準(zhǔn)確對(duì)齊像素，請(qǐng)使用float。inline-block似乎總是要求你切掉幾個(gè)像素（至少在IE中）
添加回答
舉報(bào)
0/150
提交
取消