<div>是一種HTML標簽，用于創建一個塊級的容器，可以用來包裹其他HTML元素。它常用于網頁布局，可以靈活地控制元素的排列方式。在本文中，我們將重點討論<div>元素的橫向排列應用。
，我們來看一個簡單的示例。假設我們有三個<div>元素，分別為紅色、綠色和藍色，代碼如下：

<p><<</p><div class="red"></div><p>></p>
<p><<</p><div class="green"></div><p>></p>
<p><<</p><div class="blue"></div><p>></p>

默認情況下，這三個<div>元素將會垂直排列，即紅色在最上方，綠色在中間，藍色在最下方。如果我們希望它們橫向排列，可以使用CSS中的<display:inline-block>屬性。我們可以在<style>標簽中添加以下代碼：

<p><<<</p><style>
.red, .green, .blue {
display: inline-block;
}
</style>

通過設置<div>元素的<display>屬性為<inline-block>，我們實現了它們的橫向排列。這樣，紅色、綠色和藍色的<div>元素會并排顯示在同一行。
接下來，我們再來看一個更復雜的例子。假設我們有一個包含五個<div>元素的容器，我們希望它們平均分布在頁面的橫向空間上。我們可以添加一些CSS樣式來實現這個效果：

<p><<<<</p><style>
.container {
width: 100%;
}
<br>
  .box {
width: 20%;
height: 100px;
display: inline-block;
}
</style>
<br>
<p><<<</p><div class="container">
<div class="box" style="background-color: red;"></div>
<div class="box" style="background-color: green;"></div>
<div class="box" style="background-color: blue;"></div>
<div class="box" style="background-color: yellow;"></div>
<div class="box" style="background-color: orange;"></div>
</div>

在這個例子中，我們為容器<div>元素添加了一個<width:100%>的樣式，將其寬度設置為100%。這樣，容器將占據整個橫向空間。接下來，我們為五個子<div>元素添加了<width:20%>的樣式，并設置了固定的高度。再加上<display:inline-block>屬性，這些子元素將平均分布在容器的橫向空間上。
來說，<div>元素的橫向排列可以通過CSS中的<display:inline-block>屬性來實現。我們可以根據具體的需求和布局設計，設置不同的樣式來實現不同的效果。通過合理運用<div>元素的橫向排列技巧，我們可以靈活地控制網頁布局，為用戶提供更好的瀏覽體驗。