<div>是HTML中的一個標簽，用于定義一個文檔的區域或容器，常用于將網頁內容按照一定的布局進行排列。默認情況下，<div>元素是塊級元素，即獨占一行。但是我們可以通過一些CSS樣式來改變<div>元素的行為，使它橫著排列。
下面是幾個代碼案例，詳細介紹如何使用CSS來實現<div>橫著排列的效果。
案例1： 我們可以使用CSS的display屬性將<div>元素設置為inline-block，從而實現橫向排列的效果。

html
<p>案例1：</p>
<pre>
<style>
div {
display: inline-block;
}
</style>
<br>
<div>第一個 div</div>
<div>第二個 div</div>
<div>第三個 div</div>

效果如下： 第一個 div 第二個 div 第三個 div
案例2： 我們還可以使用CSS的flexbox布局來實現<div>橫著排列的效果。
html

案例2：

<style>
.container {
display: flex;
}
</style>
<br>
<div class="container">
<div>第一個 div</div>
<div>第二個 div</div>
<div>第三個 div</div>
</div>

效果如下： 第一個 div 第二個 div 第三個 div
案例3： 我們還可以使用CSS的grid布局來實現<div>橫著排列的效果。
`html

案例3：

<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
</style>
<br>
<div class="container">
<div>第一個 div</div>
<div>第二個 div</div>
<div>第三個 div</div>
</div>

效果如下： 第一個 div 第二個 div 第三個 div
通過以上幾個案例，我們可以看到通過不同的CSS樣式，我們可以實現<div>標簽的橫向排列效果。使用這些方法，我們可以更靈活地布局網頁內容，使其更加美觀和易讀。