<div 設置 左右
<div 元素是 HTML 中常用的元素之一，用于創建一個邏輯區域，并可以在其中放置其他 HTML 元素。在將多個元素放在一個容器中時，經常會用到 div 元素來設置它們的布局。
在 div 元素中，我們可以使用 CSS 屬性來控制元素的位置和排列方式。其中，左右布局是一種常見的布局方式，即將元素分為左右兩部分，分別放置在 div 元素的左側和右側。
下面通過幾個代碼案例來詳細解釋說明如何通過 div 元素來實現左右布局的效果。
案例一：左側固定寬度，右側自適應寬度

在這個案例中，我們將左側的元素固定寬度為200px，右側的元素自適應寬度。

<div style="display: flex;">
<div style="width: 200px;">左側內容</div>
<div style="flex-grow: 1;">右側內容</div>
</div>

案例二：左右分欄等寬布局

在這個案例中，我們將左右兩側的元素設置為等寬布局。

<div style="display: flex;">
<div style="flex-basis: 50%;">左側內容</div>
<div style="flex-basis: 50%;">右側內容</div>
</div>

案例三：左側固定寬度，右側自動適應剩余寬度

在這個案例中，我們將左側的元素固定寬度為200px，并讓右側的元素自動適應剩余的寬度。

<div style="display: flex;">
<div style="width: 200px;">左側內容</div>
<div style="flex-grow: 1;">右側內容</div>
</div>

通過以上案例，我們可以看到通過設置 div 元素的 CSS 屬性，可以輕松實現不同類型的左右布局效果。在實際開發中，我們可以將左右布局運用到各種場景中，如網頁的導航欄和內容區域分割、商品列表的價格和詳情分欄等等。通過合理運用 div 元素和 CSS 屬性，我們可以實現豐富多樣的布局效果，提高網頁的設計靈活性和用戶體驗。
參考文章真實案例： 1. 《深度解析CSS3的flex布局模塊》：https://www.zhangxinxu.com/wordpress/2018/10/deeply-analysis-css3-flex-layout-attribute/ 2. 《CSS布局之Flex布局詳解》：https://www.w3cplus.com/css3/a-visual-guide-to-css3-flexbox-properties.html
最終，希望通過本文的介紹，你能夠對 div 元素的左右布局有更加深入的了解，并能夠在實際開發中靈活運用。