css怎么实现等高等宽 |css3 .active

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布局等。