如何讓多個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實現並排顯示，要想並排顯示首先總寬度要小於或等於對象上級寬度，這樣才能並排顯示實現橫向排列排版布局。