<div> 元素是HTML中最常用的元素之一，用于創建容器或包裝其他HTML元素。在大多數情況下，<div> 元素默認以塊級顯示，即每個 <div> 元素都會自動占據一行。然而，在某些情況下，我們可能希望將多個 <div> 元素橫排顯示，以節省空間或實現特定布局效果。但是，由于不同的瀏覽器可能對CSS樣式的解析存在差異，我們需要特別注意兼容性的問題，以確保在不同的瀏覽器中都能正確顯示。
在進行 <div> 元素的橫排布局時，我們可以通過設置 display 屬性來實現。常見的方法有使用 inline、inline-block 或 flex 布局等。下面我們以幾個具體的代碼案例來詳細介紹這些方法。
第一個案例演示了使用 inline 屬性來實現 <div> 元素的橫排布局。我們可以為每個 <div> 聲明 inline 屬性，使它們在同一行內連續顯示。以下是相應的代碼：

<div style="display: inline;">第一個div</div>
<div style="display: inline;">第二個div</div>
<div style="display: inline;">第三個div</div>

在此案例中，每個 <div> 元素都聲明了 display: inline; 屬性，使它們橫向排列在一行上。這種方法簡單直接，但有一些限制，例如無法設置寬度和高度。
第二個案例演示了使用 inline-block 屬性來實現 <div> 元素的橫排布局。與 inline 屬性不同，inline-block 允許我們設置元素的寬度和高度。以下是相應的代碼：

<div style="display: inline-block; width: 100px;">第一個div</div>
<div style="display: inline-block; width: 200px;">第二個div</div>
<div style="display: inline-block; width: 150px;">第三個div</div>

在此案例中，每個 <div> 元素都聲明了 display: inline-block; 屬性，并設置了不同的寬度值。這樣，每個元素就可以根據自身設置的寬度進行橫排顯示。
第三個案例演示了使用 flex 布局來實現 <div> 元素的橫排布局。flex 布局是 CSS3 引入的一種強大的布局方式，可以實現更復雜的布局效果。以下是相應的代碼：

<div style="display: flex;">
<div>第一個div</div>
<div>第二個div</div>
<div>第三個div</div>
</div>

在此案例中，我們使用了一個父容器 <div>，并將其 display 屬性設置為 flex。然后，每個子元素都以 <div> 的形式嵌套在父容器中，flex 布局會自動將它們橫向排列。
需要注意的是，雖然 flex 布局功能強大，但在一些舊版本的瀏覽器中可能不兼容。因此，在實際應用中，我們需要對不同的瀏覽器進行測試或提供兼容性的替代方案。
綜上所述，通過設置 display 屬性，我們可以實現 <div> 元素的橫排布局。inline、inline-block 和 flex 布局是常見的實現方法，根據需求選擇適合的方法，并注意瀏覽器的兼容性。這樣，我們就能夠在不同的瀏覽器中正確顯示橫向排列的 <div> 元素，實現更靈活多樣的頁面布局。