ps:當類名不一樣時候，就每個要並排顯示的都要設定：float:left;/display:inline;

也可以就是float:left(幾個div就每個都設定)+line-height:xxpx(前一個div的高度)+text-align+vertical-align.這適用於:登入+頭像之類的

我們先設定3個div盒子物件，什麼css樣式都不設定看看效果。程式碼如下：

三個div盒子均獨佔一行顯示

div盒子本身預設樣式屬性是獨佔一行，而解決div獨佔一行方法通常有兩種，一種為設定浮動，另外一種為設定display樣式。接下來為大家通過文章+圖片+案例方法介紹解決div盒子物件並排橫向排列且同行顯示方法。

我們對div設定一個float浮動屬性即可解決不併排顯示，只要你的並排div盒子總寬度小於或等於最外層盒子寬度即可實現多個div物件並排顯示。
注意：①設定float屬性；②並排總寬度小於外層寬度。

加float浮動實現多個div並排顯示

這裡我們對div通設一個浮動，當然實際使用時候，要通排顯示div物件的加入css類，我們就對要同行顯示css選擇器設定浮動。避免其它不需要設定的也被加入浮動樣式。

二、使用css display同行顯示   

我們加入display:inline即可解決實現同行並排顯示div盒子物件。
未設定display樣式效果截圖：

未並排顯示div盒子截圖

對div標籤設定div{ display:inline}樣式，解決後截圖：

使用display樣式實現同行並排顯示div盒子

為了區別其他不需要設定橫向排列顯示div盒子物件，我們對相鄰需要同排顯示的div盒子統一加粗css類，css命名為".div-inline"。

CSS程式碼如下：

1. .div-inline{ display:inline} 

1. <div class="div-inline">第一個div盒子</div> 
2. <div class="div-inline">第二個盒子</div> 
3. <div class="div-inline">第三個盒子</div> 

效果截圖：

使用display實現並排顯示

三、總結   -   TOP

無論是float浮動還是display實現並排顯示，要想並排顯示首先總寬度要小於或等於物件上級寬度，這樣才能並排顯示實現橫向排列排版佈局。