<div> 后臺分欄指的是在后臺管理系統中，將頁面內容分成多個列，并在每個列中顯示不同的模塊或功能。這種布局可以讓用戶更方便地瀏覽和管理各個模塊，提高工作效率。在實際開發中，可以使用 CSS 的 <div> 元素和相關樣式來實現后臺分欄的布局。以下是幾個代碼案例來詳細說明這一過程。
案例一：兩列分欄

<style>
.container {
display: flex;
}
<br>
    .left-column {
width: 30%;
background-color: #f0f0f0;
}
<br>
    .right-column {
width: 70%;
background-color: #fff;
}
</style>
<br>
<div class="container">
<div class="left-column">
<p>左側欄內容</p>
</div>
<div class="right-column">
<p>右側欄內容</p>
</div>
</div>

在上面的代碼中，我們使用 CSS 的 flex 布局方式來創建一個容器（.container），并設置其為 flex。然后，我們給左列（.left-column）和右列（.right-column）設置了不同的寬度和背景色，以實現兩列分欄的效果。
案例二：三列分欄

<style>
.container {
display: flex;
}
<br>
    .left-column {
width: 20%;
background-color: #f0f0f0;
}
<br>
    .middle-column {
width: 60%;
background-color: #fff;
}
<br>
    .right-column {
width: 20%;
background-color: #f0f0f0;
}
</style>
<br>
<div class="container">
<div class="left-column">
<p>左側欄內容</p>
</div>
<div class="middle-column">
<p>中間欄內容</p>
</div>
<div class="right-column">
<p>右側欄內容</p>
</div>
</div>

在這個示例中，我們使用了相同的方式創建了一個容器，并設置其為 flex。然后，我們給左列、中間列和右列設置了不同的寬度和背景色，實現了三列分欄的效果。
案例三：多列自適應分欄

<style>
.container {
display: flex;
}
<br>
    .column {
flex: 1;
background-color: #f0f0f0;
margin: 0 10px;
}
</style>
<br>
<div class="container">
<div class="column">
<p>第一列內容</p>
</div>
<div class="column">
<p>第二列內容</p>
</div>
<div class="column">
<p>第三列內容</p>
</div>
</div>

在這個案例中，我們給每個列設置了相同的 flex 屬性，并將寬度設置為自適應。這樣，無論有多少列，它們都會平分容器的寬度，并且容器中的列會自動調整大小，以適應屏幕的寬度變化。
這些案例只是演示了基本的 <div> 后臺分欄布局的實現方式，實際開發中還可以根據具體需求進行更加復雜的布局設置和樣式調整。通過靈活運用 CSS 的 flex 布局，開發者可以輕松創建出適應性強、易于管理和操作的后臺管理系統分欄布局。