如何讓多個div盒子並排同行div橫向排列顯示呢？
我們先設置3個div盒子對象，什麼css樣式都不設置看看效果。代碼如下：
三個div盒子均獨佔一行顯示
div盒子本身默認樣式屬性是獨佔一行，而解決div獨佔一行方法通常有兩種，一種爲設置浮動，另外一種爲設置display樣式。接下來爲大家通過文章+圖片+案例方法介紹解決div盒子對象並排橫向排列且同行顯示方法。
一、使用css float並排顯示 - TOP
我們對div設置一個float浮動屬性即可解決不併排顯示，只要你的並排div盒子總寬度小於或等於最外層盒子寬度即可實現多個div對象並排顯示。
加float浮動實現多個div並排顯示
這裏我們對div通設一個浮動，當然實際使用時候，要通排顯示div對象的加入css類，我們就對要同行顯示css選擇器設置浮動。避免其它不需要設置的也被加入浮動樣式。
二、使用css display同行顯示 - TOP
我們加入display:inline即可解決實現同行並排顯示div盒子對象。
未設置display樣式效果截圖：
未並排顯示div盒子截圖
對div標籤設置div{ display:inline}樣式，解決後截圖：
使用display樣式實現同行並排顯示div盒子
爲了區別其他不需要設置橫向排列顯示div盒子對象，我們對相鄰需要同排顯示的div盒子統一加粗css類，css命名爲".div-inline"。
CSS代碼如下：
- .div-inline{ display:inline}
Html代碼片段：
- <div class="div-inline">第一個div盒子</div>
- <div class="div-inline">第二個盒子</div>
- <div class="div-inline">第三個盒子</div>
效果截圖：
使用display實現並排顯示
三、總結 - TOP
無論是float浮動還是display實現並排顯示，要想並排顯示首先總寬度要小於或等於對象上級寬度，這樣才能並排顯示實現橫向排列排版佈局。
擴展閱讀：
1、css解決網頁錯位
2、網頁亂碼原因
3、css失效原因解決
4、div兩列-一行兩列div佈局
如需轉載，請註明文章出處和來源網址：http://www.divcss5.com/wenji/w472.shtml