HTML 三列布局

当前位置：主页 > 学无止境 > WEB前端 > HTML >

Vue React JavaScript Angular CSS HTML

HTML 三列布局

作者：迹忆客最近更新：2023/05/05 浏览次数：

网站经常使用多个栏来显示内容。可以根据设计者的要求以多种方式设计列布局。

我们可以结合使用 HTML 和 CSS 构建响应迅速且吸引人的列布局。在本文中，我们将专注于设计 3 列布局。

在 HTML 中创建三列布局

通常，HTML 列是使用 <div> 标记定义的。在 <div> 标签之间，我们使用 row 关键字定义类。

在定义三列布局时，应该创建三个 <div> 元素和它们之间的三个列类。

让我们看看下面的例子。

<!DOCTYPE html>
<html>
    <head>
        <title>html 3 column layout</title>
        <link rel="stylesheet" href="style1.css">
    </head>

    <body>
        <h1>
            Column three layout
        </h1>
        <div class="row">
              <div class="column" style="background-color:#404040;">Content of the column</div>
              <div class="column" style="background-color:#a0a0a0;">Content of the column</div>
              <div class="column" Style="background-color:#dcdcdc;">Content of the column</div>
        </div>
    </body>
</html>

考虑到上面的 HTML 代码，我们在其中的第一个 <div> 元素中声明了行类。三列被定义为可以划分整个浏览器区域的类。

使用样式元素，我们可以为三列添加背景颜色。

列的内容完全取决于设计者的想法。借助上面的代码，我们可以设计一个简单的三列布局。

强烈建议添加一些 CSS 属性以获得正确的 3 列布局。为此，我们可以使用下面的 CSS 代码。

将 CSS 属性添加到 HTML 列布局

我们可以使用 HTML 属性创建一个基本的列布局，但在 CSS 属性的帮助下，它会更具交互性。它们有助于设置列的样式。

*{
    box-sizing: border-box;
}

.row{
   display:grid;
   grid-template-columns: 33.33% 33.33% 33.33%;
   justify-content: center;
   text-align: center;
   font-size: 25px;
   height: 300px;
}

3 列布局可以制作成网格。上面的 CSS 代码表示如何使用 display 属性显示网格布局。

我们有 grid-template-columns 属性将浏览器空间的整个区域划分为相同的三列。

CSS 属性高度定义了列的高度。 justify-content 属性用于对齐每一列中的内容。

此外，我们添加了文本对齐和字体大小。

作为上述 HTML 和 CSS 代码的结果，我们可以获得如下所示的 3 列布局。

Web 布局必须适合不同类型的屏幕。我们将创建一个响应式 HTML 3 列布局来辅助一些 HTML 元素。

让我们检查一下如何设计响应式列布局的方式。

在 HTML 中创建响应式三列布局

有几种方法可以使列布局响应。我们可以添加一个视口元素来调整布局以适应不同的屏幕。

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta> 标签用于添加将设置网页视口的视口元素。设置网页的视口将指示浏览器管理页面的大小和比例。

使用上面的 HTML 代码，我们可以使列布局适合所有不同类型的屏幕尺寸。我们应该将上面的代码添加到 HTML 代码的 head 元素中，如下代码所示。

<!DOCTYPE html>
<html>
    <head>
        <title>html 3 column layout</title>
        <link rel="stylesheet" href="style1.css">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            *{
                box-sizing: border-box;
            }
            .row{

                display:grid;
                grid-template-columns: 33.33% 33.33% 33.33%;
                justify-content: center;
                text-align: center;
                font-size: 25px;
                height: 300px;
            }
        </style>
    </head>

    <body>
        <h1>
            Column three layout
        </h1>
        <div class="row">
              <div class="column" style="background-color:#404040;">Content of the column</div>
              <div class="column" style="background-color:#a0a0a0;">Content of the column</div>
              <div class="column" Style="background-color:#dcdcdc;">Content of the column</div>
        </div>
    </body>
</html>