天天看點

DIV元素不換行

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<title>div執行個體 www.dvicss5.com</title> 

</head> 

<body> 

<div>第一個div</div> 

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

</body> 

</html> 

獨占一行div盒子截圖

DIV元素不換行

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

通過以上DIV案例,我們可以觀察到DIV的确預設情況下是獨占一行寬度100%。

如何讓DIV并排不換行呢?

<title>無标題文檔</title> 

<style> 

div{ float:left} 

</style> 

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

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

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

執行個體效果截圖:

DIV元素不換行

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

<title>div并排執行個體 www.dvicss5.com</title> 

div{ display:inline} 

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

DIV元素不換行

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

總結:實作div不換行其實是讓div預設獨占一行的樣式去掉,去掉可以使用float和display樣式。

3.項目代碼

4.截圖

DIV元素不換行