<div> 是HTML中最常見的元素之一，用于定義一個文檔中的區塊。這個區塊可以用來容納其他HTML元素，比如文字、圖片和其他嵌套的 <div> 元素等。在這篇文章中，我們將深入探討如何在一個 <div> 中再插入三個 <div>，以便更好地理解它們之間的關系和作用。
第一個例子是最簡單的情況，我們創建一個父 <div> 并在其中插入三個子 <div>。通過使用CSS樣式，我們可以為這些子 <div> 設置不同的背景顏色，以便更好地區分它們。

<style>
.parent {
width: 400px;
height: 200px;
border: 1px solid black;
}
.child {
width: 100px;
height: 200px;
float: left;
}
.child:nth-child(1) {
background-color: red;
}
.child:nth-child(2) {
background-color: green;
}
.child:nth-child(3) {
background-color: blue;
}
</style>
<br>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

在上述代碼中，我們使用了CSS樣式來設置父 <div> 的寬度、高度和邊框。子 <div> 的寬度設置為100px，高度與父 <div> 相同，并使用浮動屬性使其水平排列。通過設置不同的背景顏色，我們可以在視覺上區分這三個子 <div>。
第二個例子展示了如何在一個子 <div> 中再插入三個子 <div>。我們使用相同的CSS樣式設置，并給子 <div> 的背景顏色加上不同的透明度，以便更好地區分它們。

<style>
.parent {
width: 400px;
height: 200px;
border: 1px solid black;
}
.child {
width: 100px;
height: 200px;
float: left;
}
.grandchild {
width: 50px;
height: 200px;
float: left;
}
.grandchild:nth-child(1) {
background-color: rgba(255, 0, 0, 0.5);
}
.grandchild:nth-child(2) {
background-color: rgba(0, 255, 0, 0.5);
}
.grandchild:nth-child(3) {
background-color: rgba(0, 0, 255, 0.5);
}
</style>
<br>
<div class="parent">
<div class="child">
<div class="grandchild"></div>
<div class="grandchild"></div>
<div class="grandchild"></div>
</div>
<div class="child"></div>
<div class="child"></div>
</div>

在這個例子中，我們通過在一個子 <div> 中插入三個子 <div> 來創建更多的層級。通過設置不同的背景顏色和透明度，我們可以清楚地看到這些層級關系。值得注意的是，我們使用了相同的CSS樣式，只是將它們應用于不同的類名。
通過以上兩個例子，我們可以看出 <div> 元素的嵌套是非常靈活的。我們可以根據需要在一個 <div> 中插入更多的 <div>，以實現更復雜的布局和設計。這種嵌套的結構使得我們能夠更好地組織和管理網頁中的內容，提供更好的可讀性和可維護性。希望這篇文章對你理解如何在 <div> 中嵌套其他 <div> 有所幫助。