<title>CSS排列div</title>

CSS（層疊樣式表）是用于描述網頁樣式和布局的語言，它可以通過選擇器來選擇HTML文檔中的元素并為其添加樣式。在網頁設計中，經常需要排列不同的div元素，以實現各種布局效果。本文將詳細介紹CSS中如何排列div，并提供幾個代碼案例進行演示。

水平排列

要實現div元素在水平方向上的排列，可以使用CSS屬性display: inline-block或float: left。display: inline-block將div元素視為內聯元素，可以水平排列在一行上，而float: left則是將元素向左浮動，使其在水平方向上排列。

<style>
.container {
display: inline-block;
/* 或 float: left; */
}
</style>
<br>
<div class="container">Container 1</div>
<div class="container">Container 2</div>
<div class="container">Container 3</div>

垂直排列

要實現div元素在垂直方向上的排列，可以使用CSS屬性display: block，再配合設置height或者line-height屬性。display: block將div元素視為塊級元素，會獨占一行，而設置height或者line-height屬性可以控制行高，從而實現垂直排列。

<style>
.container {
display: block;
height: 50px;
/* 或 line-height: 50px; */
}
</style>
<br>
<div class="container">Container 1</div>
<div class="container">Container 2</div>
<div class="container">Container 3</div>

網格排列

要實現div元素在網格形式下的排列，可以使用CSS屬性display: grid，并通過設置grid-template-columns和grid-template-rows屬性來定義網格的列數和行數。

<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
}
</style>
<br>
<div class="container">Container 1</div>
<div class="container">Container 2</div>
<div class="container">Container 3</div>
<div class="container">Container 4</div>
<div class="container">Container 5</div>
<div class="container">Container 6</div>

居中排列

要實現div元素在水平和垂直方向上的居中排列，可以使用CSS屬性display: flex，再配合設置justify-content和align-items屬性。

<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
</style>
<br>
<div class="container">Container</div>

多列布局

要實現多列布局，可以使用CSS屬性column-count和column-width來設置列數和列寬。

<style>
.container {
column-count: 3;
column-width: 200px;
}
</style>
<br>
<div class="container">
<p>Content 1</p>
<p>Content 2</p>
<p>Content 3</p>
<p>Content 4</p>
<p>Content 5</p>
<p>Content 6</p>
</div>

通過以上幾個代碼案例，我們可以靈活運用CSS屬性來實現div元素的不同排列方式，從而滿足網頁設計的需求。