css三栏等分布局 |css 画微信图标

首先，在HTML中要定义三个DIV元素，分别为左栏、中栏和右栏，如下所示：

<div class="left"></div>
<div class="center"></div>
<div class="right"></div>

接着，在CSS中分别对各个DIV元素进行样式设置，包括定位、宽度和背景颜色等。具体代码如下所示：

.left{
position: absolute;
top: 0;
left: 0;
width: 33.33%;
height: 100%;
background-color: #ccc;
}
.center{
position: absolute;
top: 0;
left: 33.33%;
width: 33.33%;
height: 100%;
background-color: #999;
}
.right{
position: absolute;
top: 0;
right: 0;
width: 33.33%;
height: 100%;
background-color: #555;
}

解释一下上面CSS代码中的各项设置。首先，通过position: absolute;设置三个元素的定位方式为绝对定位，使其可以相互独立地布局。接着，使用top、left、right等属性调整三个元素的位置以实现左、中、右三栏布局。最后，通过width属性将三个元素的宽度设置为33.33%，从而实现等分布局。另外，为了让三个元素具有高度，需要在CSS中设置height:100%。

综上所述，通过上述代码设置，就可以实现CSS三栏等分布局的效果。通过经过修改调整，可以适应不同场景下的实际需求。