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

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

实例:

布局需求:

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

html 复制代码
<!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>
相关推荐
鱼樱前端13 分钟前
uni-app快速入门章法(一)
前端·uni-app
zhangxuyu111833 分钟前
flex布局学习记录
前端·css·学习
掘金一周40 分钟前
🍏让前端去做 iPhone 的液态玻璃❓ | 掘金一周 10.2
前端·人工智能·后端
Keepreal4961 小时前
谈谈对javascript原型链的理解以及原型链的作用
前端·javascript
itslife1 小时前
vite 源码 - 配置
前端·javascript
Keepreal4961 小时前
Typescript中type和interface的区别
前端·typescript
RJiazhen1 小时前
从迁移至 Rsbuild 说起,前端为什么要工程化
前端·架构·前端工程化
小红1 小时前
网络通信核心协议详解:从ARP到TCP三次握手与四次挥手
前端·神经网络
影子信息2 小时前
uniapp 日历组件 uni-datetime-picker
前端·uni-app