如何放置三个分区
在 HTML 中并排放置?


<div> 标签定义了 HTML 文档的分区。此标签主要用于将类似的内容组合在一起,以便于样式化,也用作 HTML 元素的容器。

我们使用 CSS 属性将三个分区 <div> 标签并排放置在 HTML 中。CSS 属性 float 用于实现此目的。

语法

以下是 <div> 标签的语法。

<div class='division'>Content…</div>

示例 1

以下是如何使用 CSS 属性在 HTML 中将三个分区类并排放置的示例。

Open Compiler
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .parent { border: 1rem solid green; margin: 1rem; padding: 1rem 1rem; text-align: center; } .division { display: inline-block; border: 1px solid aquamarine; padding: 1rem 1rem; } </style> </head> <body> <div class='parent'> <div class='division'>div tag 1</div> <div class='division'>div tag 2</div> <div class='division'>div tag 3</div> </div> </body> </html>

以下是以上示例程序的输出。

我们通过使用 CSS 属性更改样式,也可以覆盖样式属性。

示例 2

另一个在 HTML 页面上将三个 <div> 标签并排放置的示例如下:

Open Compiler
<!DOCTYPE html> <html> <head> <title>HTML div</title> </head> <body> <div style="width: 100px; float:left; height:100px; background:gray; margin:10px"> First DIV </div> <div style="width: 100px; float:left; height:100px; background:yellow; margin:10px"> Second DIV </div> <div style="width: 100px; float:left; height:100px; background:red; margin:10px"> Third DIV </div> </body> </html>

示例 3 - 通过创建分屏

以下是如何使用 CSS 属性在 HTML 中将三个分区类并排放置的示例。

Open Compiler
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .split { height: 100%; width: 50%; position: fixed; top: 0; } .left { left: 50%; background-color: yellowgreen; } .middle{ background-color: blueviolet } .right { right: 25%; background-color: aquamarine; } </style> </head> <body> <div class="split left"> </div> <div class="split middle"></div> <div class="split right"> </div> </body> </html>

以下是以上示例程序的输出。

更新于: 2022年10月19日

9K+ 次查看

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告