<div>是HTML中最常用的標簽之一，它代表了文檔中的一個區塊或一個節。然而，你可能會遇到這樣一個需求：在一個<div>元素中放置另一個<div>元素。這種嵌套的結構可以實現更復雜的布局以及各種交互效果。接下來，我們將通過幾個代碼案例詳細解釋如何在<div>上放置一個<div>。
，我們來看一個簡單的例子。假設我們有一個<div>元素，顯示一個紅色的方塊，并且我們想在這個方塊中放置另一個<div>元素，顯示一個藍色的小方塊。下面是相應的HTML和CSS代碼：

html
<div class="outer">
<div class="inner"></div>
</div>

css
.outer {
width: 200px;
height: 200px;
background-color: red;
}
<br>
.inner {
width: 50px;
height: 50px;
background-color: blue;
}

在上面的代碼中，我們創建了一個<div>元素，并為其添加了一個類名"outer"。這個類名用于控制該元素的樣式，包括寬度、高度和背景顏色。然后，在這個<div>元素內部，我們再創建了一個<div>元素，并為其添加了一個類名"inner"。同樣，這個類名用于控制內部元素的樣式。通過這樣的嵌套結構，我們實現了在一個<div>上放置另一個<div>的效果。
接下來，我們再來看一個稍微復雜一點的例子。假設我們有一個<div>元素作為父容器，里面包含了兩個子<div>元素。我們希望這兩個子元素一左一右排列，并且寬度平分父容器的寬度。下面是相應的HTML和CSS代碼：

html
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>

css
.parent {
display: flex;
}
<br>
.child {
flex: 1;
height: 50px;
}
<br>
.child:first-child {
background-color: red;
}
<br>
.child:last-child {
background-color: blue;
}

在上面的代碼中，我們使用CSS的flex布局來實現子元素一左一右排列的效果。，我們將父容器的display屬性設置為"flex"，這樣子元素將自動成為一個橫向的彈性盒子。然后，我們使用flex屬性將子元素的寬度平分父容器的寬度。同時，我們為兩個子元素分別添加了一個類名"child"，用于控制它們的樣式。在示例中，第一個子元素的背景顏色為紅色，而第二個子元素的背景顏色為藍色。通過這樣的布局，我們實現了在一個<div>上放置兩個<div>的效果，并且這兩個<div>水平排列。
綜上所述，通過在<div>上放置一個<div>，我們可以實現更復雜的布局和交互效果。無論是簡單的嵌套結構還是使用flex布局實現的復雜排列，這種技術都為我們提供了更多的可能性。希望以上的案例能幫助你更好地理解并應用這一技術。