<h2 style="text-align:center;">div中分列

在網頁設計和開發中，經常需要將網頁內容分成多列來展示，這樣可以更好地利用頁面空間，使布局更加靈活和美觀。在HTML和CSS中，我們可以使用div元素和一些CSS樣式來實現網頁內容的分列顯示。

下面我們將通過幾個代碼案例來詳細解釋和說明div中的分列：

1. 等寬分列

等寬分列是指將網頁內容均勻地分成多列，并且每列的寬度相等。我們可以通過設置div元素的寬度和float屬性來實現等寬分列。

<div style="width: 33.33%; float: left;">
<p>第一列內容</p>
</div>
<div style="width: 33.33%; float: left;">
<p>第二列內容</p>
</div>
<div style="width: 33.33%; float: left;">
<p>第三列內容</p>
</div>

在上述代碼中，我們使用了三個div元素來實現等寬分列。每個div元素的寬度被設置為33.33%，這樣三個div元素的寬度總和為100%，即撐滿父容器的寬度。使用float屬性可以使這三個div元素在同一行中并排顯示。

2. 不等寬分列

有時候，我們需要將網頁內容按照不同的比例進行分列顯示，這時可以通過設置不同的寬度值來實現不等寬分列。

<div style="width: 25%; float: left;">
<p>第一列內容</p>
</div>
<div style="width: 50%; float: left;">
<p>第二列內容</p>
</div>
<div style="width: 25%; float: left;">
<p>第三列內容</p>
</div>

在上述代碼中，我們使用三個div元素實現不等寬分列。第一個和第三個div元素的寬度被設置為25%，第二個div元素的寬度被設置為50%。這樣，第二列的寬度是第一列和第三列寬度的兩倍。

3. 響應式分列

隨著移動設備的普及，使網頁能夠在不同屏幕尺寸下適應和展示是十分重要的。為了實現響應式分列，我們可以使用媒體查詢和CSS的flexbox布局。

<style>
.container {
display: flex;
flex-wrap: wrap;
}
<br>
    .column {
width: 50%;
padding: 10px;
}
<br>
    @media screen and (max-width: 768px) {
.column {
width: 100%;
}
}
</style>
<br>
<div class="container">
<div class="column">
<p>第一列內容</p>
</div>
<div class="column">
<p>第二列內容</p>
</div>
</div>

在上述代碼中，我們創建了一個容器div元素，并將它的display屬性設置為flex。這樣，容器中的div元素會自動排列成一行。使用flex-wrap: wrap屬性可以讓超出容器寬度的div元素自動換行。

在媒體查詢的部分，當屏幕寬度小于等于768px時，我們將單列布局改為雙列布局，即將每個div元素的寬度設置為50%。

通過上述幾個代碼案例，我們可以靈活地利用div元素和CSS樣式來實現網頁內容的分列。等寬分列、不等寬分列和響應式分列可以滿足不同的布局需求，使網頁在不同設備上都能得到良好的展示效果。