div 自動調整是指通過 CSS 和 HTML 的配合，使得 div 元素能夠根據其內容的長度和寬度自動調整大小。這在開發網頁時特別有用，因為它可以確保在不同分辨率和設備上都能夠正常顯示，提供更好的用戶體驗。下面將以幾個代碼案例來詳細解釋說明 div 自動調整的使用方法和效果。
第一個案例是創建一個自適應寬度的 div，它會根據內容的長度自動調整寬度。為了實現這個效果，我們需要定義一個具有 flex 布局屬性的父容器，并將 div 元素放置在其中。以下是代碼示例：

<p><style></p>
<p>  .container {</p>
<p>    display: flex;</p>
<p>    justify-content: center;</p>
<p>    align-items: center;</p>
<p>  }</p>
<p>  </p>
<p>  .content {</p>
<p>    padding: 20px;</p>
<p>    background-color: lightblue;</p>
<p>  }</p>
<p></style></p>
<p> </p>
<p><div class="container"></p>
<p>  <div class="content">這是一個自適應寬度的 div</div></p>
<p></div></p>

以上代碼中，我們定義了一個名為 container 的父容器，并將其 display 屬性設為 flex，這樣它的子元素會沿主軸方向自動排列。content 類的 div 具有設置了 padding 和 background-color 的樣式，使其更加易于觀察。通過這個案例，我們可以看到 div 的寬度會根據內容的長度自動調整。
第二個案例是創建一個自適應高度的 div，它會根據內容的行數自動調整高度。為了實現這個效果，我們可以使用 CSS 的 overflow 屬性，將 div 的高度設為 auto，并將其最大高度限制在一定范圍內。以下是代碼示例：

<p><style></p>
<p>  .container {</p>
<p>    height: 200px;</p>
<p>    overflow: auto;</p>
<p>    padding: 20px;</p>
<p>    background-color: lightblue;</p>
<p>  }</p>
<p></style></p>
<p> </p>
<p><div class="container"></p>
<p>  這是一個自適應高度的 div，它會根據內容的行數來自動調整高度。這里填充一些文本以增加行數。</p>
<p></div></p>

在這個案例中，我們定義了一個名為 container 的 div，并將其高度設為 200px。overflow 屬性設置為 auto，這將在內容超出容器時自動顯示滾動條。通過將 div 的高度設置為 auto，它會根據文本的行數自動調整高度，從而適應內容的長度。
通過以上這兩個案例，我們可以看到如何使用 CSS 和 HTML 實現 div 的自動調整。這些技術在實際開發中非常有用，特別是在處理響應式設計和跨平臺兼容性時。希望本文能夠對你理解和應用 div 自動調整有所幫助。