DIV盒子默認是換行獨占100%寬度：
DIV盒子沒有賦予CSS樣式時，默認DIV盒子是獨占一行（寬度為100%）。
如下默認情況HTML代碼：
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <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>
- <meta charset="utf-8" />
- <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>
- <meta charset="utf-8" />
- <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.項目代碼
<div class="line bolder" style="margin-top:-4px;float:left;">最新競價：</div> <div id="startPrice" class="line" style="padding-left:10px;margin:auto;margin-top:-4px;">7600（現場）</div> <div class="line bolder" style="margin-top:-4px;float:left;">保留價：</div> <div id="reservePrice" class="line" style="padding-left:10px;margin:auto;margin-top:-4px;">100</div>
4.截圖
