div 元素是HTML中最常用的塊級元素之一，可以被用來組合和布局其他HTML元素。在默認情況下，div 元素是一個塊級元素，它會獨自占據一行，即使在頁面上有足夠的空間容納多個 div 元素。然而，通過設置 CSS 屬性，我們可以使多個 div 元素水平排列在一行上。
下面我們通過幾個代碼案例來詳細解釋說明如何使用 div 元素實現水平排列。

案例一：使用float屬性

div {
float: left;
margin-right: 10px;
}

在這個案例中，我們給 div 元素設置了 float 屬性，并將其值設為 left。這樣 div 元素就會浮動到其周圍的其他元素的左側，并且下一個元素會緊挨在其右側。我們還設置了右外邊距（margin-right）來為每個 div 元素之間添加一定的間距。

案例二：使用display屬性

.container {
display: flex;
}
<br>
div {
flex: 1;
}

在這個案例中，我們創建了一個容器元素（container），并給它設置了display屬性，并將其值設為 flex。接下來，我們通過設置div元素的flex屬性為1，讓它們平均占據容器的可用寬度。這樣所有的div元素將會水平排列在一行上。

案例三：使用inline-block屬性

div {
display: inline-block;
}

在這個案例中，我們給 div 元素設置了 display 屬性，并將其值設為 inline-block。這樣 div 元素就能夠像行內元素一樣排列在一行上，并且可以設置寬度和高度。需要注意的是，inline-block 元素之間會產生空格，為了避免這個問題，可以通過設置父容器的 font-size 屬性為0，然后再為 div 元素單獨設置字體大小。

通過上述的幾個代碼案例，我們可以看到如何使用 div 元素橫排。每個案例都有其獨特的應用場景，選擇適合的方法取決于實際情況和需求。從浮動元素到 flexbox 和 inline-block，我們有多種方法來實現水平排列的 div 元素，可以根據具體需求選擇合適的方法。

參考文章：
- "Creating Equal Height Columns with Flexbox" - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- "How to Use Inline-Block Properly" - https://medium.com/@heyoka/how-to-use-inline-block-properly-ed8915930dae