DIV元素不換行

標籤：情況   round   pad   add   第一個   項目   src   isp   觀察   

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

如下預設情況HTML代碼：

1. <!DOCTYPE html> 
2. <html> 
3. <head> 
4. <meta charset="utf-8" /> 
5. <title>div執行個體 www.dvicss5.com</title> 
6. </head> 
7. <body> 
8. <div>第一個div</div> 
9. <div>第二個盒子</div> 
10. </body> 
11. </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並排不換行執行個體代碼：

1. <!DOCTYPE html> 
2. <html> 
3. <head> 
4. <meta charset="utf-8" /> 
5. <title>無標題文檔</title> 
6. <style> 
7. div{ float:left} 
8. </style> 
9. </head> 
10. <body> 
11. <div>第一個div盒子</div> 
12. <div>第二個div盒子</div> 
13. </body> 
14. </html> 

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

執行個體效果：

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

 2.對div設定display並排樣式   -   TOP

通過對div設定display:inline樣式讓div同樣失去預設100%獨佔一行的寬度。

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

1、執行個體HTML原始碼：

1. <!DOCTYPE html> 
2. <html> 
3. <head> 
4. <meta charset="utf-8" /> 
5. <title>div並排執行個體 www.dvicss5.com</title> 
6. <style> 
7. div{ display:inline} 
8. </style> 
9. </head> 
10. <body> 
11. <div>第一個div盒子</div> 
12. <div>第二個div盒子</div> 
13. </body> 
14. </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.

 

DIV元素不換行