2275浏覽量

inline-block

來源: 時間:2014-12-30

你可以創建很多網格來鋪滿浏覽器。在過去(qù)很長的一(yī)段時間内使用 float 是一(yī)種選擇,但是使用 inline-block 會更簡單。讓我(wǒ)們看下(xià)使用這兩種方法的例子:

困難的方式(使用浮動)

.box { float: left; width: 200px; height: 100px; margin: 1em; } .after-box { clear: left; } 

我(wǒ)在浮動!

我(wǒ)在浮動!

我(wǒ)在浮動!

我(wǒ)在浮動!

我(wǒ)在浮動!

我(wǒ)在浮動!

我(wǒ)在浮動!

我(wǒ)在浮動!

我(wǒ)在浮動!

我(wǒ)在浮動!

我(wǒ)在浮動!

我(wǒ)在使用 clear,所以我(wǒ)不會浮動到上面那堆盒子的旁邊。

容易的方式(使用 inline-block)

你可以用 display 屬性的值 inline-block 來實現相同效果。

.box2 { display: inline-block; width: 200px; height: 100px; margin: 1em; } 

我(wǒ)是一(yī)個行内塊!

我(wǒ)是一(yī)個行内塊!

我(wǒ)是一(yī)個行内塊!

我(wǒ)是一(yī)個行内塊!

我(wǒ)是一(yī)個行内塊!

我(wǒ)是一(yī)個行内塊!

我(wǒ)是一(yī)個行内塊!

我(wǒ)是一(yī)個行内塊!

我(wǒ)是一(yī)個行内塊!

我(wǒ)是一(yī)個行内塊!

我(wǒ)是一(yī)個行内塊!

這次我(wǒ)可沒有用 clear 。太棒了!

你得做些額外(wài)工(gōng)作來讓IE6和IE7支持 inline-block 。有些時候人們談到 inline-block 會觸發叫做 hasLayout 的東西,你隻需要知(zhī)道那是用來支持舊(jiù)浏覽器的。

下(xià)一(yī)篇 CSS參考手冊

上一(yī)篇: 清除浮動(clearfix hack)

聯系我(wǒ)們

一(yī)次需求提交或許正是成就一(yī)個出色産品的開(kāi)始。
歡迎填寫表格或發送合作郵件至: qczsky@126.com

大(dà)理青橙科技

電(diàn)話(huà):13988578755 13988578755

郵箱:qczsky@126.com

地址:大(dà)理市下(xià)關龍都春天10層