我们如何在HTML中将两个部分并排放置？-html教程-PHP中文网

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

王林

发布： 2023-08-31 16:25:01

转载

2315人浏览过

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

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

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

我们如何在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 设置边距 -

简篇AI排版

AI排版工具，上传图文素材，秒出专业效果！

554

查看详情

<!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='parent'>
   <div class='division'>Content…</div>
   <div class='division'>Content…</div>
</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中将两个部分并排放置？的详细内容，更多请关注php中文网其它相关文章！