CSS是網頁設計和開發中的重要組成部分，也是許多網站的靈魂。網頁設計中，等高等寬布局是比較常見的一種布局方式。下面我們來介紹一下如何使用CSS實現等高等寬的布局。

HTML代碼：
<div class="container">
<div class="column">
<p>這是一列</p>
<p>等高等寬的文字堆疊</p>
<p>層疊在同一個框中</p>
</div>
<div class="column">
<p>這是一列</p>
<p>等高等寬的文字堆疊</p>
<p>層疊在同一個框中</p>
</div>
<div class="column">
<p>這是一列</p>
<p>等高等寬的文字堆疊</p>
<p>層疊在同一個框中</p>
</div>
</div>
CSS代碼：
.container {
display: flex;
width: 100%;
height: 100%;
justify-content: space-between;
}
.column {
width: 30%;
background-color: #f5f5f5;
text-align: center;
padding: 10px;
border: 1px solid #ccc;
}

上述代碼中，使用了flex布局來實現等高等寬的效果，讓父容器（.container）擁有flex容器屬性，同時設置了它的寬度和高度為100%，使其充滿整個頁面。設置了justify-content: space-between，可以讓子元素在容器中自動平均分配空間，從而實現三列等寬的布局。

對于子元素（.column）的設置，寬度設為30%，讓它們充滿父元素的空間。設置了background-color，text-align，padding和border等屬性，讓其具有視覺上的效果。

在這個簡單的例子中，我們可以看到，flex布局為我們提供了很便利的方式來實現等高等寬布局。此外，也可以通過其他方式來完成這個效果，如使用table布局或者inline-block布局等。