本文轉(zhuǎn)自：http://www.divcss5.com/wenji/w472.shtml
我們先設(shè)置3個div盒子對象偶垮，什么css樣式都不設(shè)置看看效果。代碼如下：如何讓多個div盒子并排同行div橫向排列顯示呢鼎俘？
三個div盒子均獨占一行顯示
div盒子本身默認(rèn)樣式屬性是獨占一行，而解決div獨占一行方法通常有兩種辩涝，
一種為設(shè)置浮動贸伐，
另外一種為設(shè)置display樣式。
接下來為大家通過文章+圖片+案例方法介紹解決div盒子對象并排橫向排列且同行顯示方法怔揩。
一捉邢、使用css float并排顯示
我們對div設(shè)置一個float浮動屬性即可解決不并排顯示，只要你的并排div盒子總寬度小于或等于最外層盒子寬度即可實現(xiàn)多個div對象并排顯示商膊。
加float浮動實現(xiàn)多個div并排顯示
這里我們對div通設(shè)一個浮動伏伐，當(dāng)然實際使用時候，要通排顯示div對象的加入css類晕拆，我們就對要同行顯示css選擇器設(shè)置浮動藐翎。避免其它不需要設(shè)置的也被加入浮動樣式。
二实幕、使用css display同行顯示
我們加入display:inline即可解決實現(xiàn)同行并排顯示div盒子對象阱高。
未設(shè)置display樣式效果截圖：
未并排顯示div盒子截圖
對div標(biāo)簽設(shè)置div{ display:inline}樣式，解決后截圖：
使用display樣式實現(xiàn)同行并排顯示div盒子
為了區(qū)別其他不需要設(shè)置橫向排列顯示div盒子對象茬缩，我們對相鄰需要同排顯示的div盒子統(tǒng)一加粗css類赤惊，css命名為".div-inline"。
CSS代碼如下：
1. .div-inline{ display:inline}
Html代碼片段：
1. <div class="div-inline">第一個div盒子</div>
2. <div class="div-inline">第二個盒子</div>
3. <div class="div-inline">第三個盒子</div>
效果截圖：
使用display實現(xiàn)并排顯示
三凰锡、總結(jié)
無論是float浮動還是display實現(xiàn)并排顯示未舟，要想并排顯示首先總寬度要小于或等于對象上級寬度圈暗，這樣才能并排顯示實現(xiàn)橫向排列排版布局。
