當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

DIV元素不换行

發布時間：2025/5/22 编程问答 21 豆豆

生活随笔收集整理的這篇文章主要介紹了 DIV元素不换行小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

如下默認情況HTML代碼：

<!DOCTYPE?html>?

<html>?

<head>?

<title>div實例?www.dvicss5.com</title>?

</head>?

<body>?

<div>第一個div</div>?

<div>第二個盒子</div>?

</body>?

</html>?

獨占一行div盒子截圖

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

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

如何讓DIV并排不換行呢？
1、對div設置float
2、對div設置display樣式

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

對div設置float:left樣式相當于是讓div對象靠左，自然失去了本身寬度樣式。
讓DIV+CSS實現DIV并排不換行實例代碼：

<!DOCTYPE?html>?

<html>?

<head>?

<title>無標題文檔</title>?

<style>?

div{?float:left}?

</style>?

</head>?

<body>?

<div>第一個div盒子</div>?

<div>第二個div盒子</div>?

</body>?

</html>?

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

實例效果截圖：

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

?

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

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

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

1、實例HTML源代碼：

<!DOCTYPE?html>?

<html>?

<head>?

<title>div并排實例?www.dvicss5.com</title>?

<style>?

div{?display:inline}?

</style>?

</head>?

<body>?

<div>第一個div盒子</div>?

<div>第二個div盒子</div>?

</body>?

</html>?

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

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

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

3.項目代碼

4.截圖

總結

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

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

上一篇：免安装版Tomcat6.0启动方法
下一篇： Amazon DynamoDB 入门2：