<!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并排不換行呢?
<title>無标題文檔</title>
<style>
div{ float:left}
</style>
<div>第一個div盒子</div>
<div>第二個div盒子</div>
說明:我們對div設定了float:left
執行個體效果截圖:
display:inline意思是讓對象并排顯示。
<title>div并排執行個體 www.dvicss5.com</title>
div{ display:inline}
2、實作不換行div效果截圖
使用css display實作div不換行截圖
總結:實作div不換行其實是讓div預設獨占一行的樣式去掉,去掉可以使用float和display樣式。
3.項目代碼
4.截圖