三種實現水平排列塊元素的方式

1. 使用浮動定位（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>

當我們不給塊設置固定大小時，對塊級元素設置浮動布局，浮動后，行內塊的寬度會收縮適應于其中內容的最小寬度。

2. 行內塊（inline-block）

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

可以實現水平布局，但是會發現一個問題，就是兩個塊級標簽之間存在空隙。

這是因為，HTML源代碼中的換行符被渲染成了空白符。

兩種方法可以消除：

源代碼中標簽之間不適用換行符，但這種方式對開發者不友好。

把包含元素的font-size設置為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中存在著繼承機制，因此當我們給父元素設置樣式時，若子元素沒有設置相同樣式，則子元素會繼承父元素的樣式。比如上面的font-size. 我們給父元素設置為0，若子元素不設置font-size的大小，則會繼承父元素的值，即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>

三種方法優缺點比較

浮動 與行內塊一樣，可以包裝多行文本。浮動也會根據自己的內容來“收縮適應”。浮動的包含與清除，有時會很麻煩。另一方面，浮動可以不依賴元素在代碼中的次序。

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

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

.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>

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。