HTML Div 元素
The <div> 元素用作其他 HTML 元素的容器。
The <div> 元素
The <div> 元素默认情况下是块级元素，这意味着它占据所有可用宽度，并且在前后带有换行符。
示例
A <div> 元素占据所有可用宽度
Lorem Ipsum <div>I am a div</div> dolor sit amet.
结果
亲自尝试 »
The <div> 元素没有必需属性，但 style，class 和 id 比较常见。
<div> 作为容器
The <div> 元素经常用于将网页的各个部分分组在一起。
示例
包含 HTML 元素的 <div> 元素
<div>
<h2>伦敦</h2>
<p>伦敦是英格兰的首都。</p>
<p>伦敦有超过 1300 万居民。</p>
</div>
结果
伦敦
伦敦是英格兰的首都。
伦敦有超过 1300 万居民。
亲自尝试 »
居中对齐 <div> 元素
如果您有一个宽度不为 100% 的 <div> 元素，并且您想将其居中对齐，请将 CSS margin 属性设置为 auto。
多个 <div> 元素
您可以在同一个页面上使用多个 <div> 容器。
示例
<div>
<h2>伦敦</h2>
<p>伦敦是英格兰的首都。</p>
<p>伦敦有超过 1300 万居民。</p>
</div>
<div>
<h2>奥斯陆</h2>
<p>奥斯陆是挪威的首都。</p>
<p>奥斯陆有超过 600,000 居民。</p>
</div>
<div>
<h2>罗马</h2>
<p>罗马是意大利的首都。</p>
<p>罗马有将近 300 万居民。</p>
</div>
结果
伦敦
伦敦是英格兰的首都。
伦敦有超过 1300 万居民。
奥斯陆
奥斯陆是挪威的首都。
奥斯陆有超过 600,000 居民。
罗马
罗马是意大利的首都。
罗马有将近 300 万居民。
亲自尝试 »
将 <div> 元素并排对齐
在构建网页时，您通常希望将两个或多个 <div> 元素并排排列，如下所示
伦敦
伦敦是英格兰的首都。
伦敦有超过 1300 万居民。
奥斯陆
奥斯陆是挪威的首都。
奥斯陆有超过 600,000 居民。
罗马
罗马是意大利的首都。
罗马有将近 300 万居民。
有不同的方法可以将元素并排对齐，所有方法都包含一些 CSS 样式。我们将研究最常见的方法
浮动
CSS float 属性最初并非旨在将 <div> 元素并排对齐，但多年来一直被用于此目的。
CSS float 属性用于定位和格式化内容，并允许元素并排浮动而不是彼此堆叠。
示例
如何使用浮动将 div 元素并排对齐
<style>
.mycontainer {
width:100%;
overflow:auto;
}
.mycontainer div {
width:33%;
float:left;
}
</style>
结果
伦敦
伦敦是英格兰的首都。
伦敦有超过 1300 万居民。
奥斯陆
奥斯陆是挪威的首都。
奥斯陆有超过 600,000 居民。
罗马
罗马是意大利的首都。
罗马有将近 300 万居民。
亲自尝试 »
在我们的 CSS 浮动教程 中了解更多关于浮动的信息。
内联块
如果您将 <div> 元素的 display 属性从 block 更改为 inline-block，<div> 元素将不再在前后添加换行符，并将并排显示而不是彼此堆叠。
示例
如何使用 display: inline-block 将 div 元素并排对齐
<style>
div {
width: 30%;
display: inline-block;
}
</style>
结果
伦敦
伦敦是英格兰的首都。
伦敦有超过 1300 万居民。
奥斯陆
奥斯陆是挪威的首都。
奥斯陆有超过 600,000 居民。
罗马
罗马是意大利的首都。
罗马有将近 300 万居民。
亲自尝试 »
弹性盒
CSS 弹性盒布局模块的引入是为了更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。
要使 CSS 弹性盒方法生效，请用另一个 <div> 元素包围 <div> 元素，并将其设置为弹性容器。
示例
如何使用弹性盒将 div 元素并排对齐
<style>
.mycontainer {
display: flex;
}
.mycontainer > div {
width:33%;
}
</style>
结果
伦敦
伦敦是英格兰的首都。
伦敦有超过 1300 万居民。
奥斯陆
奥斯陆是挪威的首都。
奥斯陆有超过 600,000 居民。
罗马
罗马是意大利的首都。
罗马有将近 300 万居民。
亲自尝试 »
在我们的 CSS 弹性盒教程 中了解更多关于弹性盒的信息。
网格
CSS 网格布局模块提供了一个基于网格的布局系统，具有行和列，使设计网页变得更加容易，无需使用浮动和定位。
听起来几乎与弹性盒相同，但它能够定义多个行并分别定位每行。
CSS 网格方法要求您用另一个 <div> 元素包围 <div> 元素，并将其设置为网格容器，并且您必须指定每列的宽度。
示例
如何使用网格将 <div> 元素并排对齐
<style>
.grid-container {
display: grid;
grid-template-columns: 33% 33% 33%;
}
</style>
结果
伦敦
伦敦是英格兰的首都。
伦敦有超过 1300 万居民。
奥斯陆
奥斯陆是挪威的首都。
奥斯陆有超过 600,000 居民。
罗马
罗马是意大利的首都。
罗马有将近 300 万居民。
亲自尝试 »
在我们的 CSS 网格教程 中了解更多关于网格的信息。
HTML 标签
| 标签 | 描述 |
|---|---|
| <div> | 定义文档中的一个部分（块级元素） |
有关所有可用 HTML 标签的完整列表，请访问我们的 HTML 标签参考。
