<div>是HTML中的一個標簽，用于定義HTML文檔中的一個區(qū)域或者一個容器。它可以用來包含其他HTML元素，如文本、圖像、表格、列表等等。<div>標簽可以通過CSS來控制其外觀和布局，并且可以使用一些屬性來指定其特定的功能。
一個常見的應用場景是使用<div>標簽來適應內容，即根據(jù)內容的長度或者大小來調整<div>的寬度和高度，以使內容能夠完全顯示并且布局合理。這在設計響應式網頁和自適應布局時特別有用。
下面是幾個代碼案例，用以說明<div>如何根據(jù)內容適應自身寬度和高度。
第一個案例是一個簡單的<div>標簽，其中包含一段文本內容。我們將使用CSS來指定其寬度和高度，并設置背景顏色為灰色。

<style>
.box {
width: auto;
height: auto;
background-color: gray;
padding: 10px;
}
</style>
<br>
    <div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non pulvinar ipsum. Fusce in ligula id ipsum rhoncus cursus. Aliquam erat volutpat.</p>
</div>

在這個案例中，<div>的寬度和高度設置為auto。這意味著<div>將根據(jù)其內容的大小來調整尺寸，以適應文本內容的長度。另外，我們還設置了一些其他的樣式，如背景顏色和內邊距，以使<div>更加美觀。
第二個案例是一個包含圖片的<div>標簽。這次，我們將設置<div>的寬度為固定值，高度為自動。圖片的寬度將根據(jù)<div>的寬度來縮放。

<style>
.container {
width: 300px;
height: auto;
border: 1px solid black;
}
<br>
    .image {
width: 100%;
height: auto;
}
</style>
<br>
    <div class="container">
<img class="image" src="example.jpg" alt="Example Image">
</div>

在這個案例中，<div>的寬度設置為300px，并且沒有設置高度。這樣，<div>將根據(jù)包含的圖片的實際寬度來調整自身的寬度，并保持適合圖片的高度。這樣，無論圖片的尺寸如何，都可以完全顯示在<div>內。
最后一個案例是一個包含<ul>列表的<div>標簽。我們將設置<div>的高度為固定值，內容超過該高度時將出現(xiàn)滾動條。

<style>
.container {
width: 300px;
height: 200px;
overflow: auto;
border: 1px solid black;
}
<br>
    .list {
list-style-type: none;
padding: 0;
margin: 0;
}
<br>
    .list-item {
padding: 10px;
border-bottom: 1px solid gray;
}
</style>
<br>
    <div class="container">
<ul class="list">
<li class="list-item">Item 1</li>
<li class="list-item">Item 2</li>
<li class="list-item">Item 3</li>
<li class="list-item">Item 4</li>
<li class="list-item">Item 5</li>
<li class="list-item">Item 6</li>
<li class="list-item">Item 7</li>
<li class="list-item">Item 8</li>
<li class="list-item">Item 9</li>
<li class="list-item">Item 10</li>
</ul>
</div>

在這個案例中，<div>的高度設置為200px，并且設置了overflow屬性為auto，這意味著當內容超過<div>的高度時，將出現(xiàn)滾動條。我們還設置了一些其他的樣式，如列表的樣式和列表項的樣式，以使列表更加美觀。
以上就是關于<div>如何適應內容的幾個代碼案例。通過設置寬度、高度以及其他的樣式屬性，我們可以實現(xiàn)根據(jù)內容調整<div>的尺寸，并使布局更加靈活和美觀。