DIV橫向排列_CSS如何讓多個div盒子並排同行顯示

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

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

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

div盒子自己默認樣式屬性是獨佔一行，而解決div獨佔一行方法一般有兩種，一種爲設置浮動，另一種爲設置display樣式。接下來爲你們經過文章+圖片+案例方法介紹解決div盒子對象並排橫向排列且同行顯示方法。

1、使用css float並排顯示   

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

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

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

2、使用css display同行顯示   

咱們加入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實現並排顯示

3、總結   -   TOP

不管是float浮動仍是display實現並排顯示，要想並排顯示首先總寬度要小於或等於對象上級寬度，這樣才能並排顯示實現橫向排列排版佈局。

擴展閱讀：
一、css解決網頁錯位
二、網頁亂碼緣由
三、css失效緣由解決
四、div兩列-一行兩列div佈局

文章出處和來源網址：http://www.divcss5.com/wenji/w472.shtml