HTML <div> 元素

<div> 元素

<div> 元素默认是块级元素，意味着它会占据所有可用宽度，并且前后带有换行。

实例

一个 <div> 元素占据所有可用宽度：

Lorem Ipsum <div>我是一个 div</div> dolor sit amet.

结果

Lorem Ipsum
I am a div
dolor sit amet.

亲自试一试

<div> 元素没有必需的属性，但 style、class 和 id 是常用的。

<div> 用作容器

<div> 元素常用于将网页的各个部分分组。

实例

包含 HTML 元素的 <div> 元素：

<div>
  <h2>伦敦</h2>
  <p>伦敦是英格兰的首都。</p>
  <p>伦敦有超过 900 万居民。</p>
</div>

结果

伦敦

伦敦是英格兰的首都。

伦敦有超过 900 万居民。

亲自试一试

居中对齐 <div> 元素

如果您有一个宽度不是 100% 的 <div> 元素，并且希望将其居中对齐，请将 CSS margin 属性设置为 auto。

实例

<style>
div {
  width:300px;
  margin:auto;
}
</style>

结果

伦敦

伦敦是英格兰的首都。

伦敦有超过 900 万居民。

亲自试一试

多个 <div> 元素

您可以在同一页面上拥有多个 <div> 容器。

实例

<div>
  <h2>伦敦</h2>
  <p>伦敦是英格兰的首都。</p>
  <p>伦敦有超过 900 万居民。</p>
</div>

<div>
  <h2>奥斯陆</h2>
  <p>奥斯陆是挪威的首都。</p>
  <p>奥斯陆有超过 70 万居民。</p>
</div>

<div>
  <h2>罗马</h2>
  <p>罗马是意大利的首都。</p>
  <p>罗马有超过 400 万居民。</p>
</div>

结果

伦敦

伦敦是英格兰的首都。

伦敦有超过 900 万居民。

奥斯陆

奥斯陆是挪威的首都。

奥斯陆有超过 70 万居民。

罗马

罗马是意大利的首都。

罗马有超过 400 万居民。

亲自试一试

并排对齐 <div> 元素

在构建网页时，您通常希望让两个或更多 <div> 元素并排显示，像这样：

伦敦

伦敦是英格兰的首都。

伦敦有超过 900 万居民。

奥斯陆

奥斯陆是挪威的首都。

奥斯陆有超过 70 万居民。

罗马

罗马是意大利的首都。

罗马有超过 400 万居民。

有几种方法可以并排对齐元素，都涉及一些 CSS 样式设置。我们将看看最常见的方法：

Float

CSS float 属性最初并不是为了并排对齐 <div> 元素而设计的，但多年来一直被用于此目的。

CSS float 属性用于定位和格式化内容，允许元素水平定位，而不是垂直定位。

实例

如何使用 float 并排对齐 div 元素：

<style>
.mycontainer {
  width:100%;
  overflow:auto;
}
.mycontainer div {
  width:33%;
  float:left;
}
</style>

亲自试一试

在我们的 CSS 浮动教程 中学习更多关于浮动的知识。

内联块

如果您将 <div> 元素的 display 属性从 block 更改为 inline-block，<div> 元素将不再在前后添加换行，而是并排显示，而不是堆叠在一起。

实例

如何使用 display: inline-block 并排对齐 div 元素：

<style>
div {
  width: 30%;
  display: inline-block;
}
</style>

亲自试一试

Flex

CSS 弹性盒子布局模块的引入是为了更轻松地设计灵活的自适应布局结构，而无需使用浮动或定位。

要使 CSS flex 方法生效，请用另一个 <div> 元素包围 <div> 元素，并将其指定为 flex 容器。

实例

如何使用 flex 并排对齐 div 元素：

<style>
.mycontainer {
  display: flex;
}
.mycontainer > div {
  width:33%;
}
</style>

亲自试一试

在我们的 CSS 弹性盒子教程 中学习更多关于 flex 的知识。

Grid

CSS 网格布局模块提供了一个基于网格的布局系统，带有行和列，使得设计网页更容易，而无需使用浮动和定位。

听起来与 flex 几乎相同，但能够定义多行并单独定位每一行。

CSS grid 方法要求您用另一个 <div> 元素包围 <div> 元素，并将其指定为 grid 容器，并且必须指定每列的宽度。

实例

如何使用 grid 并排对齐 <div> 元素：

<style>
.grid-container {
  display: grid;
  grid-template-columns: 33% 33% 33%;
}
</style>

亲自试一试

在我们的 CSS 网格教程 中学习更多关于 grid 的知识。

HTML 标签

如需查看所有可用 HTML 标签的完整列表，请访问我们的 HTML 标签参考。