<div>標簽是HTML中常用的容器元素，用于定義文檔中的一個區域。在CSS中，我們可以使用div元素來創建布局，并通過樣式控制其外觀和排列方式。在某些情況下，我們可能需要在一個div中嵌套多個div，并希望這些嵌套的div寬度自適應其父容器的寬度。本文將詳細介紹如何實現這一功能，并通過幾個代碼案例來進行解釋。

，我們需要明確一點，CSS的盒模型中，一個元素的寬度由其內容區域的寬度、內邊距（padding）、邊框（border）和外邊距（margin）組成。當我們設置一個元素的寬度時，默認情況下是指的元素的內容區域的寬度。

在實現div中多個div寬度自適應的情況下，我們可以使用一些技巧來實現。以下是幾個常用的方法：

方法一：使用百分比寬度

通過給嵌套的div設置百分比寬度，可以實現寬度自適應。例如，我們有一個父容器div的寬度為800px，內部有兩個嵌套的div，我們可以給這兩個div設置寬度為50%。

<code>
<div class="container">
<div class="box">內容1</div>
<div class="box">內容2</div>
</div>
<br>
    .container {
width: 800px;
}
<br>
    .box {
width: 50%;
float: left;
}
</code>

在上述代碼中，我們將父容器的寬度設置為800px，內部的box元素設置為50%的寬度，并將浮動屬性設置為左浮動。這樣，兩個box元素就會自動適應父容器的寬度，并且并排顯示。

方法二：使用flexbox布局

flexbox是CSS3中的一種彈性盒子布局模型，可以方便地實現容器的自適應布局。我們可以使用flexbox來實現div中多個div寬度自適應的效果。

<code>
<div class="container">
<div class="box">內容1</div>
<div class="box">內容2</div>
</div>
<br>
    .container {
display: flex;
}
<br>
    .box {
flex: 1;
}
</code>

在上述代碼中，我們將父容器的display屬性設置為flex，這樣父容器就成為了一個彈性容器。然后，我們給內部的box元素設置flex屬性為1，表示它們將平均分配剩余的寬度。這樣，無論父容器的寬度如何變化，內部的box元素都會自動調整寬度。

方法三：使用calc函數

calc函數是CSS3中的一個計算函數，可以進行簡單的四則運算。我們可以使用calc函數來計算div中多個div的寬度。

<code>
<div class="container">
<div class="box">內容1</div>
<div class="box">內容2</div>
</div>
<br>
    .container {
width: 800px;
}
<br>
    .box {
width: calc(50% - 10px);
margin-right: 10px;
}
</code>

在上述代碼中，我們給box元素設置的寬度為calc(50% - 10px)，這樣就可以實現兩個box元素并排顯示，并且之間有10px的間距。

通過以上幾個方法，我們可以在div中實現多個嵌套的div寬度自適應的效果。根據自己的實際需求，選擇合適的方法來解決問題。希望本文對你有所幫助！