<div> 是 HTML 中的一個關鍵元素，用于創(chuàng)建網頁的布局和結構。它被廣泛用于網頁設計中的分割頁面和創(chuàng)建不同部分的容器。通過一些簡單的 CSS 屬性，我們可以實現 <div> 元素在頁面中的橫排。本文將詳細介紹如何使用 <div> 元素實現橫排效果，并提供一些代碼案例作為參考。
案例一：
第一個案例中，我們創(chuàng)建一個包含三個 div 元素的容器，使它們在同一行中水平排列：
<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)建了一個具有 class 名為 "container" 的 <div> 元素作為容器，然后再定義了一個具有 class 名為 "item" 的 <div> 元素作為每個橫排的元素。通過給容器設置 "display: flex"，我們將容器設置為使用 Flexbox 布局。此外，我們通過給每個元素設置 "margin-right: 10px" 來為元素之間添加間距。
案例二：
下面的案例中，我們將使用 CSS Grid 來創(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)建了一個具有 class 名為 "container" 的 <div> 元素作為容器，并通過 "display: grid" 將其設置為使用 CSS Grid 布局。通過 "grid-template-columns: repeat(3, 1fr)"，我們定義了容器的網格列布局，使其具有相同的寬度并在同一行中排列。通過 "gap: 10px"，我們?yōu)樵刂g設置了間距。
通過上述案例，可以看出通過簡單的 CSS 屬性，我們可以輕松地實現 <div> 元素的橫排布局。無論是使用 Flexbox 還是 CSS Grid，它們都為我們提供了強大的布局能力，使我們能夠創(chuàng)建多樣化且靈活的網頁布局。