CSS (層疊樣式表) 是一種用來描述網頁的樣式和布局的標記語言。它可以將結構與樣式分離，從而有效地提高開發者的工作效率。在 CSS 中，<div>元素是一種常用的容器元素，用于將相關的內容進行分組，并使其在頁面中以塊狀呈現。
CSS 提供了許多方法來調整<div>元素的布局，其中一種常見的需求是將多個<div>元素水平排列。通過使用 CSS 的 display 屬性，我們可以實現這樣的效果。下面將通過幾個代碼案例來詳細解釋說明。
案例一：使用 float 屬性
<code><style>
.box {
float: left;
width: 200px;
height: 100px;
margin: 10px;
background-color: #f0f0f0;
}
</style>
<br>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</code>在上述代碼中，我們通過設置float: left;來使多個<div>元素水平排列。每個<div>元素的寬度設置為 200px，高度為 100px，并且相鄰元素之間有 10px 的外邊距。背景顏色被設置為 #f0f0f0，以便區分每個元素。這樣，多個<div>元素就可以并排顯示。
案例二：使用 flexbox
<code><style>
.container {
display: flex;
justify-content: space-between;
}
<br>
.box {
width: 200px;
height: 100px;
background-color: #f0f0f0;
}
</style>
<br>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</code>另一種實現<div>元素水平排列的方法是使用 Flexbox。在上述代碼中，通過設置容器的display: flex;和justify-content: space-between;，我們可以使容器內的子元素水平排列，并且在它們之間留有空間。每個子元素的寬度和高度保持不變，背景顏色同樣設置為 #f0f0f0。
案例三：使用 CSS Grid
<code><style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
<br>
.box {
width: 200px;
height: 100px;
background-color: #f0f0f0;
}
</style>
<br>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</code>另一個實現水平排列的方法是使用 CSS Grid。在上述代碼中，通過設置容器的display: grid;和grid-template-columns: repeat(3, 1fr);，我們將容器分為 3 列，并且每一列占據相同的寬度，且自動填充可用空間。設置grid-gap: 10px;可以為每個子元素之間添加 10px 的間距。同樣地，每個子元素的寬度和高度是固定的，背景顏色為 #f0f0f0。
通過使用 float 屬性、Flexbox 或者 CSS Grid，我們可以實現<div>元素的橫向排列，從而創建出豐富多樣的布局效果。開發者可以根據具體需求選擇適合的方法，并結合其他 CSS 屬性來實現更復雜的布局。