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>
相关推荐
董世昌41几秒前
添加、删除、替换、插入元素的全方法指南
java·开发语言·前端
qq_316837756 分钟前
Element-Plus el-table lazy 自动更新子列表
前端·vue.js·elementui
林恒smileZAZ26 分钟前
Electron 的西天取经
前端·javascript·electron
这就是佬们吗31 分钟前
告别 Node.js 版本冲突:NVM 安装与使用全攻略
java·linux·前端·windows·node.js·mac·web
IT_陈寒35 分钟前
2024年JavaScript开发者必备的10个ES13新特性实战指南
前端·人工智能·后端
满栀58537 分钟前
基于 jQuery 实现商品列表增删改查与数据统计
前端·javascript·jquery
web小白成长日记38 分钟前
CSS 作用域隔离实战:React、Vue 与 Styled Components 的三种范式
前端·css·vue.js·react.js
Mr -老鬼38 分钟前
Electron 与 Tauri 全方位对比指南(2026版)
前端·javascript·rust·electron·nodejs·tauri
king王一帅5 小时前
Incremark Solid 版本上线:Vue/React/Svelte/Solid 四大框架,统一体验
前端·javascript·人工智能
智航GIS9 小时前
10.4 Selenium:Web 自动化测试框架
前端·python·selenium·测试工具