css实现三分栏

在网页布局中，三分栏是一种常见的布局方式，可以将页面分为三列进行排列显示。实现三分栏的方法有很多种，其中使用CSS进行样式控制是一种较为常见的方法。

首先，我们需要在HTML文档中准备好三个DIV容器，分别为中间内容容器和两侧栏容器。代码如下：

    <div class="left-column">左侧栏</div>
    <div class="center-column">中间内容</div>
    <div class="right-column">右侧栏</div>

然后，我们使用CSS对这三个DIV容器进行样式控制。需要将它们设置为横向排列，并设置宽度以及浮动方式。代码如下：

    .left-column,.right-column {
        width: 25%;
        float: left;
    }
    .center-column {
        width: 50%;
        float: left;
    }

以上代码中，我们将左侧栏和右侧栏的宽度都设置为25%，中间内容的宽度设置为50%。根据实际情况可以灵活调整宽度大小。

另外，由于三个DIV容器都有浮动属性，我们需要为它们的父级容器设置清除浮动样式，防止出现布局混乱的情况。代码如下：

    .wrapper {
        overflow: hidden;
    }

最后，我们给三个DIV容器设置具体的样式，比如背景色、边框等。代码如下：

    .left-column,.right-column,.center-column {
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 20px;
        Box-sizing: border-Box;
    }

以上代码中，我们给三个DIV容器都设置了白色背景、灰色边框、内边距为20px，并使用了Box-sizing属性将边框和填充计算在盒子模型内。

通过以上代码，我们可以轻松实现一个简单的三分栏页面布局。当然，这只是一个基础的实现方法，实际情况下还需要根据具体需求进行进一步调整和优化。