今天我們來聊一聊CSS中的三欄等寬布局。所謂三欄布局，即頁面由三個部分組成，分別是左欄、中間欄和右欄。這種布局在網頁設計中十分常見，也是前端開發中必須掌握的技能之一。而等寬布局，則是指三欄的寬度相等。
實現三欄等寬布局的方法其實有很多，這里我們介紹其中一種方法。首先，看一下基本結構：
```html
```
接下來，給這些元素添加樣式。首先，設置父容器container的樣式：
```css
.container {
display: flex;
}
```
這里使用了flex布局，將三個子元素水平排列。接下來，給子元素分別設置樣式：
```css
.left, .middle, .right {
flex: 1;
}
```
這里的flex:1表示子元素的寬度平分父容器的寬度，實現了等寬布局。最后，我們可以通過設置每個子元素的背景色來給三個欄目加上不同的顏色。
完整代碼如下：
```html
```
```css
.container {
display: flex;
}
.left, .middle, .right {
flex: 1;
height: 500px;
}
.left {
background-color: red;
}
.middle {
background-color: green;
}
.right {
background-color: blue;
}
```
以上就是使用CSS實現三欄等寬布局的簡單方法。有了這個基礎，我們可以在實際開發中根據不同需求進行變化和調整，實現更加復雜和多樣的布局。