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

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

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

语法

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

<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中将三个部分并排放置？的详细内容，更多请关注编程之家其它相关文章！

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

语法

Example 1

示例1

Example 2

示例2

示例 3 - 通过创建分屏

相关推荐