<div>元素是HTML中最常用的容器元素之一，可以用來包裹其他HTML元素，以便進行樣式和布局控制。在<div>元素中，可以包含多個子<div>元素，通過合適的樣式配置，我們可以實現將兩個<div>元素橫向放置的效果。
，我們可以通過使用CSS的display屬性，將兩個<div>元素設置為橫向布局。display屬性有多個值可以選擇，其中比較常用的是"display: inline-block"和"display: flex"。
代碼案例一："display: inline-block"

<style>
.container {
width: 600px;
}
<br>
    .box1, .box2 {
width: 200px;
height: 200px;
display: inline-block;
background-color: #ccc;
}
</style>
<br>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>

在上述代碼中，我們通過將.box1和.box2的display屬性設置為inline-block，使得它們在同一行內顯示。此外，通過設置.container的寬度為600px，保證兩個<div>元素可以在同一行內布局。
代碼案例二："display: flex"

<style>
.container {
display: flex;
}
<br>
    .box1, .box2 {
width: 200px;
height: 200px;
background-color: #ccc;
}
</style>
<br>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>

在上述代碼中，將.container的display屬性設置為flex，使得內部的.box1和.box2元素按照主軸方向（默認是水平方向）橫向布局。
除了上述方法外，還可以結合使用CSS3的flexbox布局和grid布局等技術，實現更復雜的橫向布局效果。通過合適的樣式配置，我們可以實現各種靈活多變的橫向布局需求。