<div>是HTML中的一個標簽，用于創建一個塊級容器，可以用來布局網頁的不同部分。而“分左右”是指使用<div>標簽將頁面內容分成左右兩部分進行布局顯示。
下面是幾個案例來說明如何使用<div>標簽實現左右布局的效果：
案例1:
案例2:
以上是兩個簡單的例子來說明如何使用<div>標簽實現頁面布局的左右分欄效果。實際上，在實際的網頁設計中，可以結合其他HTML元素和CSS屬性來實現更復雜的布局效果，如在左右分欄中添加更多的內容、使用媒體查詢來實現響應式布局等等。<div>標簽作為HTML的一個重要元素，為網頁的結構和布局提供了很大的靈活性，使得開發者可以根據具體需求創建出豐富多樣的網頁設計。
下面是幾個案例來說明如何使用<div>標簽實現左右布局的效果：
案例1:
下面的代碼演示了如何使用<div>標簽將頁面內容分為左右兩個部分：
<html>
<head>
<style>
.left {
width: 50%;
float: left;
}
<br>
.right {
width: 50%;
float: right;
}
</style>
</head>
<body>
<div class="left">
<h2>左邊內容</h2>
<p>這是左邊的內容。</p>
</div>
<div class="right">
<h2>右邊內容</h2>
<p>這是右邊的內容。</p>
</div>
</body>
</html>上述代碼中，通過給左右兩個<div>元素添加不同的class名，然后在CSS中為這兩個class分別定義了寬度為50%和使用浮動效果，從而實現了左右兩側分欄的效果。
案例2:
下面的代碼演示了如何使用<div>標簽實現左邊固定寬度，右邊自適應寬度的布局效果：
<html>
<head>
<style>
.container {
display: flex;
}
<br>
.left {
width: 200px;
}
<br>
.right {
flex: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<h2>左邊內容</h2>
<p>這是左邊的內容。</p>
</div>
<div class="right">
<h2>右邊內容</h2>
<p>這是右邊的內容。</p>
</div>
</div>
</body>
</html>上述代碼中，通過將包含兩個<div>元素的容器設置為display:flex，并為左側的<div>元素設置固定的寬度，右側的<div>元素使用flex:1來實現自適應寬度。這樣就可以實現左邊固定寬度，右邊自適應寬度的布局效果。
以上是兩個簡單的例子來說明如何使用<div>標簽實現頁面布局的左右分欄效果。實際上，在實際的網頁設計中，可以結合其他HTML元素和CSS屬性來實現更復雜的布局效果，如在左右分欄中添加更多的內容、使用媒體查詢來實現響應式布局等等。<div>標簽作為HTML的一個重要元素，為網頁的結構和布局提供了很大的靈活性，使得開發者可以根據具體需求創建出豐富多樣的網頁設計。
上一篇div 去除邊框
下一篇div 加入html