如何将 HTML 页面垂直和水平地分成两部分

2024年8月28日 | 阅读 4 分钟

在本教程中，我们将演示如何将一个HTML页面分割成2个部分、垂直部分和水平部分。我们都知道如何将一个HTML页面分成两个部分，两个垂直部分和两个水平部分。

然而，我们今天解决方案背后的想法是找到一种方法，将一个HTML页面垂直和水平地分割成两部分。尽管有很多方法可以做到这一点，但我们的目标是帮助您找到最简单的解决方案。

因此，今天我们将向您展示如何将一个HTML页面垂直和水平地分割成两部分。

如何垂直地将HTML页面分成两部分的步骤说明

此外，不再浪费时间。可以使用 division 标签及其后代标签 section 来实现。但为此目的，通常使用 division 标签。

因此，为了帮助您专业地操作，我们还将向您展示如何使用 division 元素垂直分割HTML页面。编程中还使用了另一个属性 float，其值为 left。

这意味着它将页面浮动到左侧，以便所有内容垂直对齐。代码现在提供如下：

<!DOCTYPE html>
      <html>
        <head>
          <title> Vertical Division<title>
</head>
<body>
   		<div style="background-color: blue; width: 100%; height: 650px;">

        <div style="background-color: red; width: 50%; height: 550px; float:left;">
This is the first division to have a vertical alignment.
        </div>

        <div style="background-color: yellow; width:50%; height: 550px; float:left;">
  This is the second division to have a vertical alignment.
        </div>
    </div>

</body>
      </html>

首先，输入 `<!DOCTYPE html>`，以告知网络浏览器文档是用哪个版本的HTML编写的。
`<html>` 元素用于表示一个HTML文件的开始。
如前所述，`<head>` 标签现在用于提供有关网页的详细信息。此标签中包含一个 `<title>` 元素，使我们能够提供网站的标题。“head”和“title”标签是成对的标签。因此，它们都分别以 `</head>` 和 `</title>` 标签结束。
`<body>` 元素用于指定网站的主体。本文档包含网站的所有内容。由于我们希望指示要垂直分割成两半的区域，因此在 body 标签中放置了一个 div 标签。
如果您想分割整个主体，请给出适合您屏幕的高度尺寸。
接下来，我们必须确定两个区域；在这种情况下，我们通过应用两个 div 标签来实现。完成这一切后，剩下的工作通过CSS完成；在这里，我们给这些区域其父元素一半的宽度，然后使用浮动左属性将 div 标签左对齐。
最后一步是用相应的 `</body>` 和 `</html>` 标签关闭内容和 html 标签。

如何水平地将HTML页面分成两部分的步骤说明

不再浪费时间。可以使用 div 元素及其后代标签 section 来实现。然而，主要使用 division 标签来完成这个任务。

因此，为了帮助您专业地操作，我们还将向您展示如何使用 division 元素将HTML页面逻辑上分成几个部分。如果您对了解垂直分割感兴趣，我们之前已经写过一篇关于这个主题的文章。请通过浏览该页面作为参考。

<!DOCTYPE html>
      <html>
        <head>
          <title> Horizontal Division<title>
</head>
<body>
     <div style="background-color: blue; width: 100%; height: 650px;">
        <div style="background-color: red; width: 100%; height: 300px;">
  This is the first division to have a horizontal alignment.
        </div>
        <div style="background-color: yellow; width:100%; height: 300px;">
This is the second division to have a horizontal alignment.
        </div>
    </div>
</body>
      </html>

我们现在做的第一件事是输入 `<!DOCTYPE html>`，它告诉网络浏览器文档是用哪个版本的HTML编写的。
`<html>` 元素用于表示一个HTML文件的开始。
如前所述，`<head>` 标签现在用于提供有关网页的信息。在此标签中使用 `<title>` 标签使我们能够声明网站的标题。“head”和“title”标签是成对的标签。因此，它们都分别包含闭合标签 `</head>` 和 `</title>`。
`body>` 元素用于指定网站的主体。所有将出现在网站上的信息都写在这里。
在这里，我们在 body 标签中创建一个具有特定宽度和高度的 div 元素，然后让您选择背景颜色。
在主 div 内创建另外两个 div 标签。此外，它们的宽度必须与主 div 的宽度相匹配，但您应该给它们一个不同但低于主 div 高度的高度。
请记住，主 div 的高度等于子 div 标签高度的总和。
正如您现在在浏览器中看到的那样，页面被分成了两个部分，每个部分都有您要求的高度。
最后一步是用相应的 `</body>` 和 `</html>` 标签完成内容和 html 标签。

结论 :-

总而言之，我们可以得出结论，利用 division 元素，我们能够将HTML页面垂直和水平地分开。

我真心希望这篇关于如何将HTML页面分成两部分的文章对您有帮助，并且上述提到的技术和方法易于使用。

下一个主题如何为所有设备制作响应式网站

如何将 HTML 页面垂直和水平地分成两部分

如何垂直地将HTML页面分成两部分的步骤说明

如何水平地将HTML页面分成两部分的步骤说明

结论 :-

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

如何将 HTML 页面垂直和水平地分成两部分

如何垂直地将HTML页面分成两部分的步骤说明

如何水平地将HTML页面分成两部分的步骤说明

结论 :-

相关帖子

HTML 预处理器

HTML Cellpadding

HTML Rel

HTML dt 标签

HTML 工具提示

使用 CSS 和 JavaScript 在 HTML 中点击按钮移动图片

HTML 仅输入数字

HTML 分隔线

HTML 解析

如何使用 HTML 和 CSS 创建电子邮件通讯

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器