css中把一个div平均3份

在CSS中，有时我们需要把一个div平均分成多个部分。比如，把一个区域分成三个相等的列。下面是一种实现方法：

 .container {
        display: flex;
    }

    .item {
        width: calc(100% / 3); /* 三等份 */
        box-sizing: border-box; /* 盒模型为border-box */
        padding: 10px; /* 给每个列添加内边距，使内容更美观 */
    } 

这段代码使用了CSS的弹性布局flex，通过给容器设置display: flex，让它的子项能够自动布局。而每个子项的宽度则使用calc()函数来计算。例如，calc(100% / 3)就是将其父元素的宽度除以3。

接下来，我们可以定义一个简单的HTML结构：

 <div class="container">
        <div class="item">
            <p>第一个区域</p>
        </div>
        <div class="item">
            <p>第二个区域</p>
        </div>
        <div class="item">
            <p>第三个区域</p>
        </div>
    </div> 

通过上面的代码，我们将一个div平均分成了三个相等的列，然后在每个列里面添加了一个p标签来填充内容。如果需要更多的列，我们只需要修改.item的宽度即可。