<div 分 左右>是一種常見的網頁布局方式，用于將頁面內容分為左側和右側兩個部分進行顯示。通過使用該布局方式，可以使頁面內容更加有條理并且更易于閱讀。在下面的幾個實例中，將詳細介紹如何使用<div 分 左右>來實現該布局方式。
第一個實例是一個簡單的div分左右布局，左側占據30%的寬度，右側占據70%的寬度。該實例的HTML代碼如下：

<p><div 分 左右>
<div style="float: left; width: 30%;">
左側內容
</div>
<div style="float: right; width: 70%;">
右側內容
</div>
</div></p>

在上面的代碼中，<div 分 左右>標簽將頁面內容分為左右兩個部分。左側的div通過float: left屬性向左浮動，占據頁面寬度的30%；右側的div通過float: right屬性向右浮動，占據頁面寬度的70%。這樣就實現了一個簡單的div分左右布局。
第二個實例是一個帶有標題和內容的div分左右布局。左側是一個固定寬度的邊欄，右側是一個自適應寬度的內容區域。該實例的HTML代碼如下：

<p><div 分 左右>
<div style="float: left; width: 200px;">
<h3>左側邊欄</h3>
<p>左側邊欄內容...</p>
</div>
<div style="float: right; margin-left: 220px;">
<h3>內容區域</h3>
<p>內容區域內容...</p>
</div>
</div></p>

在上面的代碼中，左側的div指定了一個固定寬度的邊欄，通過float: left屬性向左浮動；右側的div通過float: right屬性向右浮動，并通過margin-left屬性設置了與左側邊欄的間距。這樣左側是一個固定寬度的邊欄，右側是一個自適應寬度的內容區域。
<div 分 左右>布局在實際應用中有許多變體和使用方式，具體的使用方式可以根據實際需求進行調整。以下是一個更復雜的例子，展示了一個包含導航菜單、內容區域和側邊欄的div分左右布局。

<p><div 分 左右>
<div style="float: left; width: 200px;">
<ul>
<li>菜單項1</li>
<li>菜單項2</li>
<li>菜單項3</li>
</ul>
</div>
<div style="float: right; margin-left: 220px;">
<h1>這是標題</h1>
<p>這是內容...</p>
</div>
</div></p>

在上面的代碼中，左側的div是一個帶有菜單項的導航欄，右側是一個帶有標題和內容的內容區域。通過設置float: left和float: right屬性，可以實現div分左右布局，并且通過margin-left屬性設置了與導航欄的間距。這樣整個布局就具備了導航菜單、內容區域和側邊欄的特點。
<div 分 左右>是一種簡單而靈活的網頁布局方式，可以輕松地實現頁面內容的分隔和布局。通過使用float屬性和width屬性，可以靈活地控制左右兩個部分的寬度和位置。無論是簡單的兩欄布局還是帶有導航菜單和側邊欄的復雜布局，都可以通過<div 分 左右>實現。