html页面分两列怎么弄-编程学习网

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

如何制作两栏式 HTML 页面

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

1. 使用 display 创建容器

创建一个父容器元素，例如

，并使用 display: flex 设置其显示方式。

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

2. 添加子栏

在容器内创建两个子元素（例如

），代表两栏。

<div class="container">
  <div class="left-column"></div>
  <div class="right-column"></div>
</div>

3. 设置栏宽

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

.left-column {
  width: 60%;
}

.right-column {
  width: 40%;
}

4. 设置栏浮动

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

.left-column {
  float: left;
}

.right-column {
  float: right;
}

完整示例:




  <style>
    .container {
      display: flex;
    }

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

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

以上就是html页面分两列怎么弄的详细内容，更多请关注编程网其它相关文章！

阅读原文内容投诉

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341