<div. 3是CSS中用來創(chuàng)建3列布局的類。它可以幫助開發(fā)者輕松地創(chuàng)建出分欄的網(wǎng)頁布局。通過指定一個父容器的class為div. 3，然后在其中添加子元素即可實現(xiàn)3列布局。下面將使用幾個代碼案例詳細解釋div. 3的用法。
，假設(shè)我們有一個父容器，class為div. 3，我們希望在這個父容器中實現(xiàn)3列布局。我們可以給這個父容器設(shè)置一個寬度，作為整個布局的寬度，然后通過設(shè)置子元素的寬度來控制各列的寬度。以下是一個示例代碼：

<span><style></span>
<span>.div-3 {</span>
<span>width: 100%;</span>
<span>}</span>
<span>.div-3 div {</span>
<span>width: 33.33%;</span>
<span>float: left;</span>
<span>}</span>
<span></style></span>

上述代碼中，我們創(chuàng)建了一個名為div-3的class，并給它設(shè)置了寬度為100%。然后，在這個父容器中創(chuàng)建了3個子元素，并為每個子元素設(shè)置了寬度為33.33%。這樣，父容器中的3個子元素就會平均分配寬度，形成3列布局。

除了使用固定寬度的百分比來控制列的寬度外，我們還可以使用其他方法來實現(xiàn)更靈活的布局。例如，我們可以使用flexbox布局來實現(xiàn)自適應(yīng)的3列布局。以下是一個示例代碼：

<span><style></span>
<span>.div-3 {</span>
<span>display: flex;</span>
<span>}</span>
<span>.div-3 div {</span>
<span>flex: 1;</span>
<span>}</span>
<span></style></span>

上述代碼中，我們給父容器設(shè)置了display: flex，這樣子元素就會自動平均分配父容器的寬度，實現(xiàn)3列布局。通過設(shè)置子元素的flex: 1，我們可以讓子元素在父容器中平均占據(jù)空間。

還可以通過CSS網(wǎng)格布局來實現(xiàn)3列布局。以下是一個示例代碼：

<span><style></span>
<span>.div-3 {</span>
<span>display: grid;</span>
<span>grid-template-columns: 1fr 1fr 1fr;</span>
<span>}</span>
<span></style></span>

上述代碼中，我們給父容器設(shè)置了display: grid，然后通過grid-template-columns屬性設(shè)置了每列的寬度。這里，我們使用1fr作為單位來平均分配父容器的寬度，這樣子元素就會形成3列布局。

通過上述代碼案例，我們可以看到div. 3這個類可以幫助我們輕松地創(chuàng)建出3列布局。無論是固定寬度的百分比、flexbox布局還是CSS網(wǎng)格布局，都可以實現(xiàn)出靈活的分欄布局效果。在實際開發(fā)中，可以根據(jù)具體需求選擇適合的布局方式來創(chuàng)建出符合設(shè)計要求的網(wǎng)頁布局。