\[\lt p\gt 在網頁設計和開發中，經常會遇到需要將一個屏幕分為兩個部分的情況，比如將內容和側邊欄分開，或者將兩個模塊放在一行顯示。在這些情況下，使用\lt div\gt 標簽可以很方便地實現左右分開的效果。\lt /p\gt\]
\[\lt p\gt ，我們來看一個簡單的例子。假設我們有一個頁面布局，其中左側是一個固定寬度的內容區域，右側是一個固定寬度的側邊欄。\lt /p\gt\]
\[\lt pre\gt \lt div style="width: 70%; float: left;"\gt This is the content area. \lt /div\gt \lt div style="width: 30%; float: right;"\gt This is the sidebar. \lt /div\gt \lt /pre\gt\]
\[\lt p\gt 在上面的代碼中，我們通過給div元素添加style屬性，設置寬度和浮動來實現左右分開的效果。具體來說，左側內容區域的寬度被設為70%，右側側邊欄的寬度被設為30%。通過設置float屬性為left和right，使兩個div元素分居頁面的左右兩側。\lt /p\gt\]
\[\lt p\gt 接下來，我們來看一個稍微復雜一些的例子。假設我們有一個頁面布局，其中左側是一個占據50%寬度的導航欄，右側是一個占據50%寬度的內容區域。\lt /p\gt\]
\[\lt pre\gt \lt div style="width: 50%; float: left;"\gt This is the navigation bar. \lt /div\gt \lt div style="width: 50%; float: right;"\gt This is the content area. \lt /div\gt \lt /pre\gt\]
\[\lt p\gt 在上面的代碼中，我們同樣通過設置寬度和浮動來實現左右分開的效果。左側導航欄的寬度和右側內容區域的寬度都被設為50%。通過設置float屬性為left和right，使兩個div元素分居頁面的左右兩側。\lt /p\gt\]
\[\lt p\gt 最后，我們來看一個稍微復雜一些的例子。假設我們有一個頁面布局，其中左側是一個固定寬度的側邊欄，右側是一個自適應寬度的內容區域。\lt /p\gt\]
\[\lt pre\gt \lt div style="width: 200px; float: left;"\gt This is the sidebar. \lt /div\gt \lt div style="margin-left: 200px;"\gt This is the content area. \lt /div\gt \lt /pre\gt\]
\[\lt p\gt 在上面的代碼中，我們同樣通過設置寬度和浮動來實現左右分開的效果。左側側邊欄的寬度被設為200px，并設置為浮動。右側內容區域通過設置margin-left屬性為側邊欄的寬度，實現自適應寬度。\lt /p\gt\]
\[\lt p\gt 通過使用div標簽配合適當的CSS樣式，我們可以很輕松地實現網頁的左右分開布局，無論是固定寬度還是自適應寬度。這種布局方式在網頁設計中非常常見，可以有效地提升用戶體驗。\lt /p\gt