HTML Div 元素
<div> 元素用作其他 HTML 元素的容器。
div 元素
<div> 元素預設是一個塊級元素，這意味著它會佔用所有可用寬度，並且在前後都有換行符。
示例
div 元素佔用所有可用寬度
Lorem Ipsum <div> 我是一個 div </div> dolor sit amet.
結果
自己動手試一試 »
<div> 元素沒有必需的屬性，但 style、class 和 id 是常用的。
div 作為容器
<div> 元素通常用於將網頁的各個部分組合在一起。
示例
帶有 HTML 元素的 div 元素
<div>
<h2>倫敦</h2>
<p>倫敦是英格蘭的首都。</p>
<p>倫敦有超過 1300 萬居民。</p>
</div>
結果
London
倫敦是英格蘭的首都。
倫敦有超過 1300 萬居民。
自己動手試一試 »
居中對齊 div 元素
如果你有一個不是 100% 寬的 <div> 元素，並且你想讓它居中對齊，請將 CSS margin 屬性設定為 auto。
多個 div 元素
您可以在同一頁面上擁有多個 <div> 容器。
示例
<div>
<h2>倫敦</h2>
<p>倫敦是英格蘭的首都。</p>
<p>倫敦有超過 1300 萬居民。</p>
</div>
<div>
<h2>奧斯陸</h2>
<p>奧斯陸是挪威的首都。</p>
<p>奧斯陸有超過 60 萬居民。</p>
</div>
<div>
<h2>羅馬</h2>
<p>羅馬是義大利的首都。</p>
<p>羅馬有近 300 萬居民。</p>
</div>
結果
London
倫敦是英格蘭的首都。
倫敦有超過 1300 萬居民。
奧斯陸
奧斯陸是挪威的首都。
奧斯陸有超過 60 萬居民。
羅馬
羅馬是義大利的首都。
羅馬有近 300 萬居民。
自己動手試一試 »
並排對齊 div 元素
構建網頁時，你經常希望將兩個或多個 <div> 元素並排顯示，如下所示：
London
倫敦是英格蘭的首都。
倫敦有超過 1300 萬居民。
奧斯陸
奧斯陸是挪威的首都。
奧斯陸有超過 60 萬居民。
羅馬
羅馬是義大利的首都。
羅馬有近 300 萬居民。
有多種方法可以將元素並排對齊，所有方法都包含一些 CSS 樣式。我們將介紹最常用的方法。
浮點數
CSS float 屬性最初並非用於將 <div> 元素並排對齊，但多年來一直用於此目的。
CSS float 屬性用於定位和格式化內容，允許元素並排浮動而不是堆疊在一起。
示例
如何使用 float 將 div 元素並排對齊
<style>
.mycontainer {
width:100%;
overflow:auto;
}
.mycontainer div {
width:33%;
float:left;
}
</style>
結果
London
倫敦是英格蘭的首都。
倫敦有超過 1300 萬居民。
奧斯陸
奧斯陸是挪威的首都。
奧斯陸有超過 60 萬居民。
羅馬
羅馬是義大利的首都。
羅馬有近 300 萬居民。
自己動手試一試 »
在我們的 CSS float 教程 中瞭解更多關於 float 的資訊。
Inline-block
如果你將 <div> 元素的 display 屬性從 block 改為 inline-block，<div> 元素將不再在前後新增換行符，而是並排顯示而不是堆疊在一起。
示例
如何使用 display: inline-block 將 div 元素並排對齊
<style>
div {
width: 30%;
display: inline-block;
}
</style>
結果
London
倫敦是英格蘭的首都。
倫敦有超過 1300 萬居民。
奧斯陸
奧斯陸是挪威的首都。
奧斯陸有超過 60 萬居民。
羅馬
羅馬是義大利的首都。
羅馬有近 300 萬居民。
自己動手試一試 »
Flex 佈局
CSS Flexbox 佈局模組的引入是為了更輕鬆地設計靈活的響應式佈局結構，而無需使用 float 或 positioning。
為了使 CSS flex 方法生效，請將 <div> 元素用另一個 <div> 元素包圍，並將其設定為 flex 容器。
示例
如何使用 flex 將 div 元素並排對齊
<style>
.mycontainer {
display: flex;
}
.mycontainer > div {
width:33%;
}
</style>
結果
London
倫敦是英格蘭的首都。
倫敦有超過 1300 萬居民。
奧斯陸
奧斯陸是挪威的首都。
奧斯陸有超過 60 萬居民。
羅馬
羅馬是義大利的首都。
羅馬有近 300 萬居民。
自己動手試一試 »
在我們的 CSS flexbox 教程 中瞭解更多關於 flex 的資訊。
Grid
CSS 網格佈局模組提供了一個基於網格的佈局系統，包含行和列，使網頁設計更容易，而無需使用浮動和定位。
聽起來與 flex 幾乎相同，但能夠定義多個行並將每行單獨定位。
CSS grid 方法要求你將 <div> 元素用另一個 <div> 元素包圍，並將其設定為 grid 容器，並且你必須指定每列的寬度。
示例
如何使用 grid 將 div 元素並排對齊
<style>
.grid-container {
display: grid;
grid-template-columns: 33% 33% 33%;
}
</style>
結果
London
倫敦是英格蘭的首都。
倫敦有超過 1300 萬居民。
奧斯陸
奧斯陸是挪威的首都。
奧斯陸有超過 60 萬居民。
羅馬
羅馬是義大利的首都。
羅馬有近 300 萬居民。
自己動手試一試 »
在我們的 CSS grid 教程 中瞭解更多關於 grid 的資訊。
HTML 標籤
| 標籤 | 描述 |
|---|---|
| <div> | 定義文件中的一個節（塊級） |
有關所有可用 HTML 標籤的完整列表，請訪問我們的 HTML 標籤參考。
