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>
相关推荐
hhw19911217 分钟前
JavaScript知识点1
开发语言·前端·javascript
患得患失94921 分钟前
【前端】【功能函数】treeMapEach,对每个节点进行自定义转换的实用函数
前端
卡夫卡的小熊猫2 小时前
vue前端菜单权限控制
前端
祈澈菇凉3 小时前
什么是 Vue 的自定义事件?如何触发和监听?
前端·javascript·vue.js
2301_766536055 小时前
调试无痛入手
开发语言·前端
@大迁世界6 小时前
构建 Next.js 应用时的安全保障与风险防范措施
开发语言·前端·javascript·安全·ecmascript
IT、木易7 小时前
ES6 新特性,优势和用法?
前端·ecmascript·es6
计算机软件程序设计7 小时前
vue和微信小程序处理markdown格式数据
前端·vue.js·微信小程序
指尖时光.7 小时前
【前端进阶】01 重识HTML,掌握页面基本结构和加载过程
前端·html
前端御书房7 小时前
Pinia 3.0 正式发布:全面拥抱 Vue 3 生态,升级指南与实战教程
前端·javascript·vue.js