我们如何在HTML中将三个部分并排放置？

百变鹏仔 3个月前 (09-22) #HTML

文章标签中将

标签定义 html 文档的划分。该标签主要用于将相似的内容分组在一起以方便样式设置，也用作 html 元素的容器。

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

语法

下面是

标签的语法。
<div class='division'>Content…</div>
Example 1
的中文翻译为：
示例1
以下是使用CSS属性在HTML中将三个分区类并排放置的示例。
立即学习“前端免费学习笔记（深入）”；
<!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属性来改变样式，我们也可以覆盖样式属性。
Example 2
的中文翻译为：
示例2
在 HTML 页面上并排放置三个标记的另一个示例如下 -
<!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中将三个分区类并排放置的示例。
立即学习“前端免费学习笔记（深入）”；
<!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>
以下是上述示例程序的输出。

文章推荐

我们如何在HTML中将三个部分并排放置？

语法

Example 1

示例1

Example 2

示例2

示例 3 - 通过创建分屏

html代码是什么

值得一学的6个前端HTML+CSS特效

html怎么设置字体

怎么隐藏html标签

html怎么设置编码utf8