<div>是 HTML 中用于創建塊級元素的標簽。它通常用于包含和組織其他 HTML 元素。在網頁設計中，經常會遇到需要動態設置<div>的寬度的需求。本文將通過幾個代碼案例來詳細解釋如何動態設置<div>的寬度。

，我們可以使用百分比來設置<div>的寬度。百分比是相對于父元素的寬度來計算的。例如，如果我們想讓<div>的寬度是父元素寬度的一半，我們可以設置如下的 CSS 規則：

<div style="width: 50%;">
<!-- 內容 -->
</div>

通過設置<div>的寬度為百分比值，我們可以實現一個自適應的布局。無論父元素是多寬，<div>都會根據父元素的寬度來自動調整自己的寬度。

，我們可以使用 CSS 中的 calc() 函數來計算<div>的寬度。calc() 函數可以執行簡單的數學運算，例如加法、減法、乘法和除法。因此，我們可以用 calc() 函數來實現一些復雜的寬度計算。下面是一個示例：

<div style="width: calc(50% - 20px);">
<!-- 內容 -->
</div>

上述代碼中，我們使用 calc() 函數計算出了一個動態的寬度。它將<div>的寬度設為父元素寬度的一半減去 20px。這種方式可以方便地進行特定的計算，并實現各種自定義的寬度布局。

最后，在某些情況下，我們可能需要通過 JavaScript 動態設置<div>的寬度。例如，當某個事件發生時，我們可以通過 JavaScript 改變<div>的寬度。下面是一個示例：

<script>
function changeWidth() {
var divElement = document.getElementById("myDiv");
divElement.style.width = "300px";
}
</script>
<br>
<div id="myDiv" style="width: 200px;">
<!-- 內容 -->
</div>
<br>
<button onclick="changeWidth()">改變寬度</button>

上述代碼中，我們通過 JavaScript 定義了一個函數 changeWidth()，通過獲取指定 id 的<div>元素并設置其寬度為 300px。然后，我們在按鈕的 onclick 事件中調用了這個函數，從而改變了<div>的寬度。

來說，通過百分比、calc() 函數和 JavaScript，我們可以實現<div>的動態寬度設置。這些方法可以根據具體需求進行選擇，以實現各種自適應的布局效果。