<div>是HTML中用于定義一個容器的標簽，常用于頁面結構布局中。在某些布局中，我們希望將一個<div>標簽中的內容按水平方向對齊，可以使用一些CSS技巧和屬性來實現。本文將介紹幾個常見的方法來將<div>中的四個<div>水平對齊，并通過代碼案例進行詳細說明。
第一種方法是使用display屬性和float屬性。，我們可以給每個<div>添加一個相同的class類名，例如class="box"。然后，我們可以給.box設置float：left來實現水平排列。這里的.float-left是一個自定義的CSS類名，它定義了浮動在左側。下面是一個示例代碼：

<style>
.box {
width: 200px;
height: 200px;
float: left;
border: 1px solid black;
}
</style>
<br>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>

第二種方法是使用display屬性和inline-block屬性。同樣地，我們給每個<div>添加相同的class類名，然后使用display: inline-block來實現水平對齊。下面是示例代碼：

<style>
.box {
display: inline-block;
width: 200px;
height: 200px;
border: 1px solid black;
}
</style>
<br>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>

第三種方法是使用flexbox彈性布局。Flexbox是CSS3中引入的一種布局模式，通過一些屬性和容器來實現彈性的布局。使用flexbox可以更加靈活地控制布局。下面是一個使用flexbox實現水平對齊的示例代碼：

<style>
.container {
display: flex;
}
.box {
flex: 1;
width: 200px;
height: 200px;
border: 1px solid black;
}
</style>
<br>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>

以上就是三種常見的方法來實現<div>中四個<div>的水平對齊。通過使用不同的CSS屬性和技巧，我們可以靈活地控制頁面布局，達到想要的效果。希望本文能幫助到您理解和使用這些布局方法。