HTML板块左右排列布局——左侧 DIV 固定宽度，右侧 DIV 自适应宽度，填充满剩余页面

CJH（本人账号）

于 2024-02-18 19:14:26 发布

阅读量1k

点赞数 11

文章标签： html 前端

本文链接：https://blog.csdn.net/qq_68725483/article/details/136157517

版权

我们可以借助CSS中的 float 属性来实现。

实例：

布局需求：

左侧 DIV 固定宽度，右侧 DIV 自适应宽度，填充满剩余页面。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>title</title>
    <style>
      .left {
        float: left;
        width: 300px;
        height: 300px;
        background-color: red;
      }
      .right {
        background-color: orange;
        margin-left: 310px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <div class="left"></div>
    <div class="right"></div>
  </body>
</html>