案例一：
第一個(gè)案例中，我們創(chuàng)建一個(gè)包含三個(gè) div 元素的容器，使它們?cè)谕恍兄兴脚帕校?/p>
<html>
<head>
<style>
.container {
display: flex;
}
<br>
.item {
width: 100px;
height: 100px;
background-color: teal;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>在上述代碼中，我們創(chuàng)建了一個(gè)具有 class 名為 "container" 的 <div> 元素作為容器，然后再定義了一個(gè)具有 class 名為 "item" 的 <div> 元素作為每個(gè)橫排的元素。通過(guò)給容器設(shè)置 "display: flex"，我們將容器設(shè)置為使用 Flexbox 布局。此外，我們通過(guò)給每個(gè)元素設(shè)置 "margin-right: 10px" 來(lái)為元素之間添加間距。
案例二：
下面的案例中，我們將使用 CSS Grid 來(lái)創(chuàng)建橫排布局：
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
<br>
.item {
width: 100px;
height: 100px;
background-color: teal;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>在上述代碼中，我們創(chuàng)建了一個(gè)具有 class 名為 "container" 的 <div> 元素作為容器，并通過(guò) "display: grid" 將其設(shè)置為使用 CSS Grid 布局。通過(guò) "grid-template-columns: repeat(3, 1fr)"，我們定義了容器的網(wǎng)格列布局，使其具有相同的寬度并在同一行中排列。通過(guò) "gap: 10px"，我們?yōu)樵刂g設(shè)置了間距。
通過(guò)上述案例，可以看出通過(guò)簡(jiǎn)單的 CSS 屬性，我們可以輕松地實(shí)現(xiàn) <div> 元素的橫排布局。無(wú)論是使用 Flexbox 還是 CSS Grid，它們都為我們提供了強(qiáng)大的布局能力，使我們能夠創(chuàng)建多樣化且靈活的網(wǎng)頁(yè)布局。