div 組織圖

在網頁設計和開發中，我們經常會遇到需要對頁面元素進行布局和組織的情況。而<div>標簽是HTML中最常用的一個標簽，也是用于組織和布局的重要工具之一。它可以將頁面分割成幾個獨立的區域，從而更好地組織和控制網頁的結構和樣式。

代碼案例一：基本布局

下面是一個簡單的<div>組織圖的例子：

<div style="width: 100%; height: 400px; background-color: lightblue;">
<div style="width: 50%; height: 100%; float: left; background-color: lightgreen;">
<p>左側區域</p>
</div>
<div style="width: 50%; height: 100%; float: left; background-color: lightpink;">
<p>右側區域</p>
</div>
</div>

在這個例子中，我們創建了一個寬度為100%、高度為400px的<div>元素，并將其分割為兩個寬度為50%、高度為100%的子<div>元素。左側區域的背景色為淺綠色，右側區域的背景色為淺粉色。每個區域都有一個

標簽用于顯示文本。通過設置子<div>元素的浮動屬性為左浮動，使得它們并排顯示在父<div>元素中。

代碼案例二：嵌套布局

<div>標簽可以通過嵌套來實現更復雜的布局效果。下面是一個嵌套布局的例子：

<div style="width: 100%; height: 400px; background-color: lightblue;">
<div style="width: 50%; height: 100%; float: left; background-color: lightgreen;">
<p>左上區域</p>
<div style="width: 100%; height: 50%; background-color: lightyellow;">
<p>左下區域</p>
</div>
</div>
<div style="width: 50%; height: 100%; float: left; background-color: lightpink;">
<p>右側區域</p>
</div>
</div>

在這個例子中，我們在第一個子<div>元素中又嵌套了一個子<div>元素。左上區域和左下區域的寬度都為50%，高度分別為50%和100%。左上區域的背景色為淺黃色，左下區域的背景色為淺綠色。右側區域的寬度為50%，高度為100%，背景色為淺粉色。

代碼案例三：居中對齊

有時候，我們希望將<div>元素居中對齊。下面是一個居中對齊的例子：

<div style="width: 400px; height: 200px; background-color: lightblue; margin: 0 auto;">
<p style="text-align: center;">居中對齊</p>
</div>

在這個例子中，我們設置了父<div>元素的寬度為400px，高度為200px，背景色為淺藍色。然后使用了一個自動外邊距（margin: 0 auto;)將該<div>元素水平居中對齊。文本則通過設置

標簽的文本對齊屬性（text-align: center;）實現居中對齊。

<div>是HTML中一個強大的組織和布局工具，通過合理地使用它，我們可以輕松地實現各種復雜的頁面布局效果。