CSS是前端開發(fā)中重要的一部分。它可以用來掌控網(wǎng)頁的外觀，包括動畫、字體、顏色和布局等。其中，將一個div等分是前端開發(fā)中常見的需求，下面介紹幾種實現(xiàn)方式。

.wrapper {
display: flex;
justify-content: space-between;
}
.child {
width: calc(33.33% - 10px);
}

第一種方法是使用flex布局，將父容器（class為wrapper）display屬性設為flex，子容器（class為child）寬度設為calc(33.33% - 10px)，其中10px是子容器之間的間隔。這種方法適用于現(xiàn)代瀏覽器，但對于低版本的IE瀏覽器不太友好。

.wrapper {
display: table-cell;
border-collapse: collapse;
}
.child {
width: calc(100% / 3);
border: 1px solid black;
}

第二種方法是使用table-cell布局，將父容器（class為wrapper）display屬性設為table-cell，子容器（class為child）寬度設為calc(100% / 3)。需要注意的是，還需要將父容器的border-collapse設為collapse，并給每個子容器添加一個solid的邊框，以便區(qū)分子容器。這種方法兼容性較好，但在某些情況下可能會因為撐高父容器而不太友好。

.wrapper {
display: flex;
}
.child {
flex-basis: 33.33%;
box-sizing: border-box;
padding-right: 10px;
}
.child:last-child {
padding-right: 0;
}

第三種方法是在flex布局的基礎上，將子容器（class為child）的flex-basis設為33.33%。為了避免計算誤差，還需要將子容器的box-sizing設為border-box，padding-right設為10px，最后一個子容器的padding-right設為0。這種方法適用性較廣，但需要注意IE瀏覽器不支持flex-basis屬性。