<div>是HTML中的一個元素，可以用來創建一個盒子容器，用于對其他元素進行布局和樣式設置。當需要在一個頁面中水平顯示多個<div>元素時，可以使用CSS的flexbox布局來實現。
以下是幾個案例，展示如何使用<div>實現橫向顯示：
案例一： HTML代碼：

<p><div>元素1</p>
<p><div>元素2</p>
<p><div>元素3</p>

CSS代碼：

<p><.container> {
<display>: <flex>;
}</p>

解釋：通過給包含這幾個<div>元素的父元素設置樣式<.container>，將其<display>屬性設置為<flex>，即可實現橫向顯示這幾個<div>元素。
案例二： HTML代碼：

<p><div>元素1</p>
<p><div>元素2</p>
<p><div>元素3</p>

CSS代碼：

<p><.container> {
<display>: <flex>;
<justify-content>: <space-between>;
}</p>

解釋：通過將<.container>的<justify-content>屬性設置為<space-between>，可以使這幾個<div>元素在水平方向上均勻分布，從而實現橫向顯示。
案例三： HTML代碼：

<p><div>元素1</p>
<p><div>元素2</p>
<p><div>元素3</p>

CSS代碼：

<p><.container> {
<display>: <flex>;
<justify-content>: <center>;
}</p>

解釋：通過將<.container>的<justify-content>屬性設置為<center>，可以使這幾個<div>元素在水平方向上居中顯示，從而實現橫向顯示。
通過以上案例的說明，可以看出使用<div>元素和CSS的flexbox布局可以輕松實現橫向顯示多個元素。這種方式具有靈活性，可以根據需要進行樣式調整和擴展。在實際應用中，可以根據具體情況選擇合適的布局方式來滿足設計要求。