三種實(shí)現(xiàn)水平排列塊元素的方式

1. 使用浮動(dòng)定位（float）

.cellDiv{height:300px;/*display:table-cell;*/float:left;/*display:inline-block;*/border:1px solid orange;} <div class = "cellDiv">你好1</div><div class = "cellDiv">你好2</div><div class = "cellDiv">你好3</div>

當(dāng)我們不給塊設(shè)置固定大小時(shí)，對(duì)塊級(jí)元素設(shè)置浮動(dòng)布局，浮動(dòng)后，行內(nèi)塊的寬度會(huì)收縮適應(yīng)于其中內(nèi)容的最小寬度。

2. 行內(nèi)塊（inline-block）

.cellDiv{width:300px;height:300px;/*display:table-cell;*//*float:left;*/display:inline-block;border:1px solid orange;}

可以實(shí)現(xiàn)水平布局，但是會(huì)發(fā)現(xiàn)一個(gè)問題，就是兩個(gè)塊級(jí)標(biāo)簽之間存在空隙。

這是因?yàn)?#xff0c;HTML源代碼中的換行符被渲染成了空白符。

兩種方法可以消除：

源代碼中標(biāo)簽之間不適用換行符，但這種方式對(duì)開發(fā)者不友好。

把包含元素的font-size設(shè)置為0

.cellDiv{width:300px;height:300px;/*display:table-cell;*//*float:left;*/display:inline-block;font-size:16px;border:1px solid orange;}.container {font-size:0;}<div class = "container"><div class = "cellDiv">你好1</div><div class = "cellDiv">你好2</div><div class = "cellDiv">你好3</div> </div>

注意

由于CSS中存在著繼承機(jī)制，因此當(dāng)我們給父元素設(shè)置樣式時(shí)，若子元素沒有設(shè)置相同樣式，則子元素會(huì)繼承父元素的樣式。比如上面的font-size. 我們給父元素設(shè)置為0，若子元素不設(shè)置font-size的大小，則會(huì)繼承父元素的值，即0.

3. 表格顯示屬性

.cellDiv{width:300px;height:300px;display:table-cell;/*float:left;*//*display:inline-block;*//*font-size:16px;*/border:1px solid orange;}<div class = "cellDiv">你好1</div><div class = "cellDiv">你好2</div><div class = "cellDiv">你好3</div>

三種方法優(yōu)缺點(diǎn)比較

浮動(dòng) 與行內(nèi)塊一樣，可以包裝多行文本。浮動(dòng)也會(huì)根據(jù)自己的內(nèi)容來“收縮適應(yīng)”。浮動(dòng)的包含與清除，有時(shí)會(huì)很麻煩。另一方面，浮動(dòng)可以不依賴元素在代碼中的次序。

行內(nèi)塊 有空白符的問題，但也是可以解決的，不過要注意繼承的問題。也存在“收縮適應(yīng)”。

表格顯示模式 很方便，但僅支持不會(huì)發(fā)生折行的內(nèi)容。也就是說，當(dāng)使用表格顯示模式時(shí)，若是內(nèi)容較多，不會(huì)發(fā)生折行，會(huì)使每個(gè)元素的發(fā)生收縮，即使設(shè)置了元素的寬度。且這種方式也有著表格存在的問題，如不能設(shè)置外邊距等。

.cellDiv{width:300px;height:300px;display:table-cell;/*float:left;*//*display:inline-block;*//*font-size:16px;*/border:1px solid orange;} <div class = "cellDiv">你好1</div><div class = "cellDiv">你好2</div><div class = "cellDiv">你好3</div><div class = "cellDiv">你好1</div><div class = "cellDiv">你好2</div><div class = "cellDiv">你好3</div><div class = "cellDiv">你好1</div><div class = "cellDiv">你好2</div><div class = "cellDiv">你好3</div><div class = "cellDiv">你好1</div><div class = "cellDiv">你好2</div><div class = "cellDiv">你好3</div>

<div class = "cellDiv">你好1</div><div class = "cellDiv">你好2</div><div class = "cellDiv">你好3</div><div class = "cellDiv">你好1</div><div class = "cellDiv">你好2</div><div class = "cellDiv">你好3</div>

總結(jié)

以上是生活随笔為你收集整理的CSS样式之实现水平排列块元素的几种方式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。