码农教程 - 一技在手,衣食无忧! tools

HTML Div元素

❮ 上一节 下一节 ❯

这个<div>element 用作其他 HTML 元素的容器。

<div> 元素

这个<div>默认情况下，元素是块元素，这意味着它占用所有可用宽度，并且前后带有换行符。

示例

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

Lorem Ipsum <div>I am a div</div> dolor sit amet.

结果

洛雷姆·伊普苏姆
我是一个div
多洛坐阿梅特。

亲自试一试 »

这个<div>元素没有必需的属性，但是style,class和id是常见的。

<div> 作为容器

这个<div>元素通常用于将网页的各个部分分组在一起。

示例

带有 HTML 元素的 <div> 元素：

<div>
  <h2>London</h2>
  <p>London is the capital city of England.</p>
  <p>London has over 13 million inhabitants.</p>
</div>

结果

伦敦

伦敦是英格兰的首都。

伦敦有超过 1300 万居民。


亲自试一试 »

居中对齐 <div> 元素

如果你有一个<div>不是 100% 宽的元素，并且您想要将其居中对齐，请设置 CSSmargin属性为 auto。

示例

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

结果

伦敦

伦敦是英格兰的首都。

伦敦有超过 1300 万居民。


亲自试一试 »

多个 <div> 元素

你可以有很多<div>同一页面上的容器。

示例

<div>
  <h2>London</h2>
  <p>London is the capital city of England.</p>
  <p>London has over 13 million inhabitants.</p>
</div>

<div>
  <h2>Oslo</h2>
  <p>Oslo is the capital city of Norway.</p>
  <p>Oslo has over 600.000 inhabitants.</p>
</div>

<div>
  <h2>Rome</h2>
  <p>Rome is the capital city of Italy.</p>
  <p>Rome has almost 3 million inhabitants.</p>
</div>

结果

伦敦

伦敦是英格兰的首都。

伦敦有超过 1300 万居民。

奥斯陆

奥斯陆是挪威的首都。

奥斯陆有超过 600,000 名居民。

罗马

罗马是意大利的首都。

罗马有近 300 万居民。


亲自试一试 »

并排对齐 <div> 元素

在构建网页时，您经常希望有两个或更多<div>元素并排，如下所示：

伦敦

伦敦是英格兰的首都。

伦敦有超过 1300 万居民。

奥斯陆

奥斯陆是挪威的首都。

奥斯陆有超过 600,000 名居民。

罗马

罗马是意大利的首都。

罗马有近 300 万居民。

有多种方法可以并排对齐元素，所有方法都包含一些 CSS 样式。我们将看看最常见的方法：

漂浮

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

CSSfloat属性用于定位和格式化内容，并允许元素彼此相邻而不是彼此之上浮动。

示例

如何使用 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 Flexbox 布局模块是为了更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。

要使 CSS flex 方法起作用，请将<div>元素与另一个元素<div>元素并赋予其作为弹性容器的状态。

示例

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

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

结果

伦敦

伦敦是英格兰的首都。

伦敦有超过 1300 万居民。

奥斯陆

奥斯陆是挪威的首都。

奥斯陆有超过 600,000 名居民。

罗马

罗马是意大利的首都。

罗马有近 300 万居民。


亲自试一试 »

在我们的网站中了解有关 Flex 的更多信息CSS 弹性盒教程。

网格

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

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

CSS 网格方法要求您围绕 <div>元素与另一个元素<div>元素并给出网格容器的状态，并且必须指定每列的宽度。

示例

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

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

结果

伦敦

伦敦是英格兰的首都。

伦敦有超过 1300 万居民。

奥斯陆

奥斯陆是挪威的首都。

奥斯陆有超过 600,000 名居民。

罗马

罗马是意大利的首都。

罗马有近 300 万居民。


亲自试一试 »

了解有关网格的更多信息CSS 网格教程。

HTML标签

Tag Description
<div> Defines a section in a document (block-level)

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


❮ 上一节 下一节 ❯