CSS水平等分的方法有很多，下面介紹其中一種基于Flex布局的方法。

首先我們需要一個(gè)容器，用display:flex屬性來設(shè)置。為了讓每一個(gè)item之間有空白間隙，我們設(shè)置justify-content:space-between。這樣會(huì)讓每一個(gè)項(xiàng)目之間盡可能的平均分布在容器內(nèi)。

.container {
display: flex;
justify-content: space-between;
}

然后我們需要一個(gè)item的樣式。我們需要先計(jì)算好每一個(gè)item所占的百分比。這里我們假設(shè)要分為3等分，則一個(gè)item的寬度應(yīng)該為33.33%。但是如果直接設(shè)置為33.33%，由于像素問題可能導(dǎo)致最后一行會(huì)有小數(shù)點(diǎn)的縫隙。所以我們這里用calc()來計(jì)算相應(yīng)的百分比，并且減去10px的間隔。

.item {
width: calc(33.33% - 10px);
margin-right: 10px;
/* 這里可以加上其他的樣式，比如背景色、高度、居中等 */
}

為了讓最后一個(gè)item沒有margin-right，我們可以使用:last-child偽類來移除最后一個(gè)元素的margin-right屬性。

.item:last-child {
margin-right: 0;
}

最終的樣式如下：