< p >在HTML中，< div >元素是用來創建具有獨立樣式和布局的區域的常見元素。常常我們需要將<div>元素分為左右兩個部分，以實現不同的布局需求。下面將通過幾個代碼案例來詳細說明如何在<div>中創建左右兩個<div>的布局。< /p >
< h2 >案例1：< /h2 > < p >在這個案例中，我們將使用CSS的浮動屬性來實現<div>中左右兩個<div>的布局。，我們需要給<div>設置一個固定的寬度，以適應容納左右兩個<div>。然后，分別給左右兩個<div>設置相應的寬度和浮動方向。下面是示例代碼：< /p > < pre > < style > .left-div { width: 50%; float: left; }
.right-div { width: 50%; float: right; } < /style >
< div > < div class="left-div" > 左側內容 < /div > < div class="right-div" > 右側內容 < /div > < /div > < /pre >
< h2 >案例2：< /h2 > < p >在這個案例中，我們將使用CSS的flex布局來實現<div>中左右兩個<div>的布局。，我們需要將<div>設置為一個flex容器，并定義它的布局方向為水平。然后，給左右兩個<div>設置相應的flex屬性，以實現它們的布局要求。下面是示例代碼：< /p > < pre > < style > .container { display: flex; flex-direction: row; }
.left-div { flex: 1; }
.right-div { flex: 1; } < /style >
< div class="container" > < div class="left-div" > 左側內容 < /div > < div class="right-div" > 右側內容 < /div > < /div > < /pre >
< h2 >案例3：< /h2 > < p >在這個案例中，我們將使用CSS的grid布局來實現<div>中左右兩個<div>的布局。，我們需要將<div>設置為一個grid容器，并定義它的布局規則。然后，通過給左右兩個<div>設置相應的grid屬性，以實現它們的布局要求。下面是示例代碼：< /p > < pre > < style > .container { display: grid; grid-template-columns: 1fr 1fr; }
.left-div { grid-column: 1; }
.right-div { grid-column: 2; } < /style >
< div class="container" > < div class="left-div" > 左側內容 < /div > < div class="right-div" > 右側內容 < /div > < /div > < /pre >
< p >通過以上三個案例，我們可以看到如何在<div>中創建左右兩個<div>的布局。分別使用了浮動屬性、flex布局和grid布局來實現不同的布局需求。根據實際的需求和喜好，我們可以選擇合適的方法來創建我們想要的布局。< /p >