CSS實現平均分三欄布局

平均分三欄布局是Web頁面中非常常見的一種布局方式，通常使用CSS實現。下面的示例演示如何使用CSS實現平均分三欄布局。

HTML代碼

<div class="container">
<div class="col">
<p>第一欄內容</p>
</div>
<div class="col">
<p>第二欄內容</p>
</div>
<div class="col">
<p>第三欄內容</p>
</div>
</div>

如上所述，只需將三列內容放在一個具有class="container"的div中，然后在每個列上添加class="col"。

CSS代碼

.container {
display: flex;
justify-content: space-between;
}
.col {
flex: 1;
margin: 0 10px;
}

以上CSS代碼是實現平均分三欄布局的核心代碼。容器使用display: flex實現flex布局并使子元素橫向排列。justify-content: space-between可以確保三欄之間的間距均勻。每個col類使用flex: 1;確保三列平均分配可用空間，同時使用margin: 0 10px;將每列之間的距離設定為10個像素。

使用以上HTML和CSS代碼，可以實現一個平均分三欄布局的基本模板，可以根據需要對內容和樣式進行修改。