html页面分两列怎么弄-html教程-PHP中文网

html页面分两列怎么弄

下次还敢

发布： 2024-05-16 06:45:28

原创

2096人浏览过

通过利用 CSS 的 display 和 float 属性可以制作两栏式 HTML 页面：建立一个父容器（使用 display: flex）；在容器中添加两个代表栏的子元素；设置栏的宽度（使用 width 属性）；设置栏浮动（使用 float 属性）。

html页面分两列怎么弄

如何制作两栏式 HTML 页面

要制作两栏式 HTML 页面，可以使用 CSS 的 display 和 float 属性。

1. 使用 display 创建容器

创建一个父容器元素，例如 <div>，并使用 <code>display: flex 设置其显示方式。

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

<div class="container">
  ...
</div>

登录后复制

2. 添加子栏

在容器内创建两个子元素（例如 <div>），代表两栏。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><div class="container"> <div class="left-column"></div> <div class="right-column"></div> </div></pre>

登录后复制

</div><p><strong>3. 设置栏宽</strong></p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1422">
                            <img src="https://img.php.cn/upload/ai_manual/001/431/639/68b6d07227e30179.jpg" alt="Videoleap">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1422">Videoleap</a>
                            <p>Videoleap是一个一体化的视频编辑平台</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="Videoleap">
                                <span>139</span>
                            </div>
                        </div>
                        <a href="/ai/1422" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="Videoleap">
                        </a>
                    </div>
                
<p>使用 <code>width

属性设置栏宽。对于固定宽度的栏，可以使用百分比值或像素值。

.left-column {
  width: 60%;
}

.right-column {
  width: 40%;
}

登录后复制

4. 设置栏浮动

要使栏浮动并排显示，请使用 float 属性。将左栏设置为向左浮动，右栏设置为向右浮动。

.left-column {
  float: left;
}

.right-column {
  float: right;
}

登录后复制

完整示例:

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
    }

    .left-column {
      float: left;
      width: 60%;
    }

    .right-column {
      float: right;
      width: 40%;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left-column">
      ...
    </div>
    <div class="right-column">
      ...
    </div>
  </div>
</body>
</html>

登录后复制

html页面分两列怎么弄

大家都在看：