CSS多個div水平排列，是Web頁面布局中常見需求。本文將帶你了解實現多個div水平排列的方法。 首先，在HTML中加入如下結構：

<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>

其中，container為容器，item為排列的元素。 然后，在CSS中，可以設置container的display為flex，并設置flex-direction為row。

.container {
display: flex;
flex-direction: row;
}

這樣，container中的item就會水平排列。 如果想讓item之間有間隔，可以設置item的margin：

.item {
margin-right: 10px;
}

如果想讓container中的item居中，可以將container的justify-content設置為center：

.container {
display: flex;
flex-direction: row;
justify-content: center;
}

如果想讓item占據等分的寬度，可以將item的flex屬性設置為1：

.item {
flex: 1;
}

以上四種方法可以相互組合，達到更豐富的排列布局效果。例如，下面的代碼實現了item占據等分的寬度，且有間隔，container中的item居中的效果：

.container {
display: flex;
flex-direction: row;
justify-content: center;
}
.item {
flex: 1;
margin-right: 10px;
}

通過靈活運用CSS，我們可以實現多種多樣的頁面布局方案。希望本文對你有所幫助！