<div> 并列關系是一種常用的 HTML 元素布局方式，可以將多個 <div> 元素放置在同一行或同一列。這種布局方式適用于需要同時顯示多個元素，且希望它們保持在同一行或同一列排列的情況。本文將通過幾個代碼案例詳細解釋 <div> 并列關系的用法和實現方式。
代碼案例一：橫向并列
html代碼：

<\div class="container">
<\div class="box1">Box 1<\div>
<\div class="box2">Box 2<\div>
<\div class="box3">Box 3<\div>
<\div>

css代碼：

.container {
display: flex;
}
<br>
.box1, .box2, .box3 {
width: 100px;
height: 100px;
margin: 10px;
background-color: red;
}

解釋：上述代碼案例中，<div class="container"> 定義了一個包裹著三個子元素的容器。通過設置容器的 CSS 屬性display: flex;，可以使得容器內的子元素橫向并列排列。每個子元素的寬度、高度、外邊距和背景顏色可以根據需要進行調整。這樣，三個子元素就能夠在同一行上顯示，并且保持一定的間距。
代碼案例二：縱向并列
html代碼：

<\div class="container">
<\div class="box1">Box 1<\div>
<\div class="box2">Box 2<\div>
<\div class="box3">Box 3<\div>
<\div>

css代碼：

.container {
display: flex;
flex-direction: column;
}
<br>
.box1, .box2, .box3 {
width: 100px;
height: 100px;
margin: 10px;
background-color: blue;
}

解釋：上述代碼案例中，<div class="container"> 同樣定義了一個包裹著三個子元素的容器。與代碼案例一不同的是，通過設置容器的 CSS 屬性flex-direction: column;，可以使得容器內的子元素縱向并列排列。其余的子元素樣式同樣可以根據需要進行調整。這樣，三個子元素就能夠在同一列上顯示，并且保持一定的間距。
代碼案例三：左右并列
html代碼：

<\div class="container">
<\div class="box1">Box 1<\div>
<\div class="box2">Box 2<\div>
<\div class="box3">Box 3<\div>
<\div>

css代碼：

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
<br>
.box1, .box2, .box3 {
width: 100px;
height: 100px;
margin: 10px;
background-color: green;
}

解釋：上述代碼案例中，<div class="container"> 同樣定義了一個包裹著三個子元素的容器。通過設置容器的 CSS 屬性display: grid;和grid-template-columns: 1fr 1fr 1fr;，可以使得容器內的子元素左右并列排列。其余的子元素樣式同樣可以根據需要進行調整。這樣，三個子元素就能夠在同一行上顯示，并且寬度平均分布。
通過以上三個代碼案例，我們可以看到，<div> 并列關系可以通過設置容器的 CSS 屬性來實現不同的排列方式：橫向、縱向或左右。這種布局方式在網頁設計中非常常用，可以靈活地顯示多個元素，使得頁面結構更加美觀和可讀。希望本文對你理解和使用 <div> 并列關系有所幫助。