<div css 分列：多列布局的一種方式</div>

在網頁開發中，我們經常需要將內容分成多列顯示，以提高頁面的效果和可讀性。而使用CSS的<div>元素和一些簡單的CSS樣式，我們可以很容易地實現多列分列布局。

下面我們來具體看幾個案例：

案例一：

<code>
<p><style></p>
<p>  .container {</p>
<p>    display: flex;</p>
<p>    flex-direction: row;</p>
<p>  }</p>
<p></style></p>
<br>
    <p><div class="container"></p>
<p>  <div>Column 1</div></p>
<p>  <div>Column 2</div></p>
<p>  <div>Column 3</div></p>
<p></div></p>
</code>

在這個案例中，我們使用了CSS的flexbox布局。通過設置.container的display屬性為flex，我們創建了一個彈性容器。然后通過設置flex-direction屬性為row，我們指定了子元素在水平方向上排列。這樣我們就實現了多列分列布局，在每個<div>元素中添加了內容，分別顯示為三列。

案例二：

<code>
<p><style></p>
<p>  .container {</p>
<p>    column-count: 3;</p>
<p>    column-gap: 20px;</p>
<p>  }</p>
<p></style></p>
<br>
    <p><div class="container"></p>
<p>  <p>Column 1</p></p>
<p>  <p>Column 2</p></p>
<p>  <p>Column 3</p></p>
<p>  <p>Column 4</p></p>
<p>  <p>Column 5</p></p>
<p>  <p>Column 6</p></p>
<p></div></p>
</code>

在這個案例中，我們使用了CSS的column屬性。通過設置.container的column-count屬性為3，我們將容器中的內容分成了3列。同時，我們通過設置column-gap屬性為20px，給列之間添加了一定的間距。

案例三：

<code>
<p><style></p>
<p>  .container {</p>
<p>    display: grid;</p>
<p>    grid-template-columns: repeat(3, 1fr);</p>
<p>    gap: 20px;</p>
<p>  }</p>
<p></style></p>
<br>
    <p><div class="container"></p>
<p>  <div>Column 1</div></p>
<p>  <div>Column 2</div></p>
<p>  <div>Column 3</div></p>
<p>  <div>Column 4</div></p>
<p>  <div>Column 5</div></p>
<p>  <div>Column 6</div></p>
<p></div></p>
</code>

在這個案例中，我們使用了CSS的grid布局。通過設置.container的display屬性為grid，我們創建了一個網格容器。然后通過設置grid-template-columns屬性為repeat(3, 1fr)，我們指定了容器中的元素分為3列，并且每列的寬度平均分配（1fr表示剩余空間的比例）。最后，我們通過設置gap屬性為20px，給網格中的元素添加了一定的間距。

以上是<div css 分列的幾個案例，通過這些簡單的CSS樣式，我們可以輕松實現多列分列布局。使用這些布局方式，可以更好地展示網頁內容，提高用戶的體驗。