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

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

三個(gè)div盒子均獨(dú)占一行顯示

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

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

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

加float浮動(dòng)實(shí)現(xiàn)多個(gè)div并排顯示

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

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

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

未并排顯示div盒子截圖

對div標(biāo)簽設(shè)置div{ display:inline}樣式，解決后截圖：

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

為了區(qū)別其他不需要設(shè)置橫向排列顯示div盒子對象，我們對相鄰需要同排顯示的div盒子統(tǒng)一加粗css類，css命名為".div-inline"。

CSS代碼如下：

.div-inline{ display:inline} 

Html代碼片段：

<div class="div-inline">第一個(gè)div盒子</div> 
<div class="div-inline">第二個(gè)盒子</div> 
<div class="div-inline">第三個(gè)盒子</div> 

效果截圖：

使用display實(shí)現(xiàn)并排顯示

三、總結(jié)   -   TOP

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

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

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