DIV盒子默認是換行獨占100%寬度：

DIV盒子沒有賦予CSS樣式時，默認DIV盒子是獨占一行(寬度為100%)。

如下默認情況HTML代碼：

html>

div實例?www.dvicss5.com第一個div第二個盒子

獨占一行div盒子截圖

2個div對象盒子獨占一行，形成自動換行布局效果截圖

通過以上DIV案例，我們可以觀察到DIV的確默認情況下是獨占一行寬度100%。

如何讓DIV并排不換行呢？

1、對div設置float

2、對div設置display樣式

1.對div設置float浮動樣式 ? - ??TOP

對div設置float:left樣式相當于是讓div對象靠左，自然失去了本身寬度樣式。

讓DIV+CSS實現DIV并排不換行實例代碼：

html>

無標題文檔

div{?float:left}

第一個div盒子第二個div盒子

說明：我們對div設置了float:left

實例效果截圖：

使用css浮動樣式讓div失去默認的100%寬度

2.對div設置display并排樣式 ? - ??TOP

通過對div設置display:inline樣式讓div同樣失去默認100%獨占一行的寬度。

display:inline意思是讓對象并排顯示。

html>

div并排實例?www.dvicss5.com

div{?display:inline}

第一個div盒子第二個div盒子

2、實現不換行div效果截圖

使用css display實現div不換行截圖

總結：實現div不換行其實是讓div默認獨占一行的樣式去掉，去掉可以使用float和display樣式。

3.項目代碼

最新競價：7600(現場)保留價：100

4.截圖

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的div超出不换行_DIV元素不换行的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。