如何讓多個div盒子并排同行div橫向排列顯示呢？

我們先設置3個div盒子對象，什么css樣式都不設置看看效果。代碼如下：

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

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

一、使用css float并排顯示   -   TOP

我們對div設置一個float浮動屬性即可解決不并排顯示，只要你的并排div盒子總寬度小于或等于最外層盒子寬度即可實現(xiàn)多個div對象并排顯示。

加float浮動實現(xiàn)多個div并排顯示

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

二、使用css display同行顯示   -   TOP

我們加入display:inline即可解決實現(xiàn)同行并排顯示div盒子對象。
未設置display樣式效果截圖：

未并排顯示div盒子截圖

對div標簽設置div{ display:inline}樣式，解決后截圖：

使用display樣式實現(xiàn)同行并排顯示div盒子

為了區(qū)別其他不需要設置橫向排列顯示div盒子對象，我們對相鄰需要同排顯示的div盒子統(tǒng)一加粗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實現(xiàn)并排顯示

三、總結   -   TOP

無論是float浮動還是display實現(xiàn)并排顯示，要想并排顯示首先總寬度要小于或等于對象上級寬度，這樣才能并排顯示實現(xiàn)橫向排列排版布局。

擴展閱讀：
1、css解決網(wǎng)頁錯位
2、網(wǎng)頁亂碼原因
3、css失效原因解決
4、div兩列-一行兩列div布局

如需轉載，請注明文章出處和來源網(wǎng)址：http://www./wenji/w472.shtml