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

百变鹏仔 4周前 (09-22) #HTML

文章标签中将

标签定义 html 文档的划分。该标签主要用于将相似的内容分组在一起，以便于设计样式。它还用作 html 元素的容器，我们可以使用 class 或 id 属性轻松地设置此标签的样式。我们可以将内容放置在标记内。

使用CSS属性，我们可以在HTML中并排放置两个标签。

通过样式设置，我们可以并排放置两个划分类。

语法

以下是标记的语法。

立即学习“前端免费学习笔记（深入）”；

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

示例 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>      .division {         display: inline-block;         border: 1px solid red;         padding: 1rem 1rem;   </style></head><body>   <!--<div class='parent'>-->   <div class='division'>div tag 1</div>   <div class='division'>div tag 2</div>   <!--</div>--></body></html>

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

示例 2

在并排添加两个标签的另一个示例中，我们使用 CSS 属性来设置其样式，方法是将高度设置为 100px，并使用 set_margin 设置边距 -

<!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></body></html>

添加父标签

我们还可以添加一个父级来放置两个分班。这里父标签充当子类（HTML 元素）的容器。

我们还可以使用 CSS 属性设置父级的样式。

语法

以下是父标记的语法，其中包含两个子标记。

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

示例 1

下面给出了一个在 HTML 中并排放置两个标记的示例，在此程序中我们使用父类在 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></body></html>

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

示例 - 通过创建分屏

下面给出了一个示例，通过将屏幕分成两半来并排放置两个 div 标签。

<!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: 0;         background-color: yellowgreen;      }      .right {         right: 0;         background-color: aquamarine;      }   </style></head><body>   <div class="split left">   </div>   <div class="split right">   </div></body></html>

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

文章推荐

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

语法

示例 1

示例 2

添加父标签

语法

示例 1

示例 - 通过创建分屏

html代码是什么

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

html怎么设置字体

怎么隐藏html标签

html怎么设置编码utf8