<div>中的<div>高度自適應高度是指在HTML文檔中使用<div>標簽嵌套<div>標簽，并且內部<div>標簽的高度能夠根據內容的多少自動調整的特性。在開發網頁時，我們經常需要使用這個特性來實現不同布局的需求。下面我將通過幾個代碼案例來詳細解釋說明。
，我們來看一個簡單的例子。假設我們有一個<div>容器，里面包含了兩個<div>子元素。我們希望子元素的高度能夠根據內容的多少自動調整，而且兩個子元素應該垂直排列。我們可以使用CSS的flexbox布局來實現這個效果。具體的代碼如下：

<pre>html
<style>
.container {
display: flex;
flex-direction: column;
width: 200px;
}
<br>
    .item {
flex: 1;
background-color: lightblue;
margin: 5px;
padding: 10px;
}
</style>
<br>
<div class="container">
<div class="item">
<p>這是第一個子元素的內容。</p>
</div>
<div class="item">
<p>這是第二個子元素的內容。</p>
<p>還有一些額外的內容。</p>
</div>
</div>

在這個例子中，我們給容器設置了display: flex屬性，使其成為一個彈性容器。然后通過flex-direction: column屬性將子元素垂直排列。子元素設置了flex: 1屬性，使其高度根據內容的多少進行自適應調整。運行上述代碼，我們可以看到兩個子元素的高度分別根據內容的多少進行了調整。
接下來，我們來看一個稍微復雜一點的例子。假設我們有一個<div>容器，里面包含了多個<div>子元素，并且每個子元素內部還包含了一些內容和其他標簽。我們希望子元素的高度能夠根據內容的多少自動調整，而且子元素之間有一定的間距。我們可以使用CSS的float屬性來實現這個效果。具體的代碼如下：

<pre>html
<style>
.container {
width: 500px;
}
<br>
    .item {
float: left;
width: 200px;
margin: 20px;
padding: 10px;
background-color: lightblue;
box-sizing: border-box;
}
</style>
<br>
<div class="container">
<div class="item">
<h2>第一個子元素</h2>
<p>這是第一個子元素的內容。</p>
</div>
<div class="item">
<h2>第二個子元素</h2>
<p>這是第二個子元素的內容。</p>
<ul>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
</ul>
</div>
<div class="item">
<h2>第三個子元素</h2>
<p>這是第三個子元素的內容。</p>
<img src="example.jpg">
</div>
</div>

在這個例子中，我們給每個子元素設置了float: left屬性，使其浮動到左邊，實現了子元素之間的間距。同時，我們給子元素設置了固定的寬度，使其在一行內排列。子元素的內部內容可以按需調整，高度會根據內容的多少自動進行調整。通過給子元素的box-sizing屬性設置為border-box，可以讓子元素的寬度包括了padding和border的寬度。運行上述代碼，我們可以看到子元素的高度根據內容的多少自動進行了調整，同時子元素之間有一定的間距。
綜上所述，<div>中的<div>高度自適應高度是一種常見的布局需求，在網頁開發中經常會用到。通過合理地使用CSS布局屬性和技巧，我們可以實現不同需求下的自適應高度效果。希望通過本文的介紹和示例代碼，讀者們能夠更好地理解和應用這個特性。