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 标签参考。
