<div>元素是HTML中最常用的容器元素之一，可以用來(lái)包裹其他HTML元素，以便進(jìn)行樣式和布局控制。在<div>元素中，可以包含多個(gè)子<div>元素，通過(guò)合適的樣式配置，我們可以實(shí)現(xiàn)將兩個(gè)<div>元素橫向放置的效果。
，我們可以通過(guò)使用CSS的display屬性，將兩個(gè)<div>元素設(shè)置為橫向布局。display屬性有多個(gè)值可以選擇，其中比較常用的是"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>

在上述代碼中，我們通過(guò)將.box1和.box2的display屬性設(shè)置為inline-block，使得它們?cè)谕恍袃?nèi)顯示。此外，通過(guò)設(shè)置.container的寬度為600px，保證兩個(gè)<div>元素可以在同一行內(nèi)布局。
代碼案例二："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屬性設(shè)置為flex，使得內(nèi)部的.box1和.box2元素按照主軸方向（默認(rèn)是水平方向）橫向布局。
除了上述方法外，還可以結(jié)合使用CSS3的flexbox布局和grid布局等技術(shù)，實(shí)現(xiàn)更復(fù)雜的橫向布局效果。通過(guò)合適的樣式配置，我們可以實(shí)現(xiàn)各種靈活多變的橫向布局需求。