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>
相关推荐
CHU7290352 分钟前
让知识传递更顺畅:在线教学课堂APP的功能设计
前端·人工智能·小程序
周淳APP4 分钟前
【React Hook全家桶】大致过一遍React Hooks
前端·javascript·react.js·前端框架·react hooks
sheji34166 分钟前
【开题答辩全过程】以 基于web的图书借阅系统的设计与实现为例,包含答辩的问题和答案
前端
CodeSheep12 分钟前
两位大佬相继离世,AI时代我们活得太着急了
前端·后端·程序员
xuankuxiaoyao13 分钟前
VUE.JS 实践 第三章
前端·javascript·vue.js
放下华子我只抽RuiKe526 分钟前
NLP自然语言处理硬核实战笔记
前端·人工智能·机器学习·自然语言处理·开源·集成学习·easyui
PieroPc26 分钟前
电脑DIY组装报价系统 用MiMo V2 Pro 写html ,再用opencode(选MiMo 作模型) 当录入口
前端·html
工程师老罗30 分钟前
lvgl有哪些布局?
前端·javascript·html
好家伙VCC31 分钟前
# 发散创新:用Selenium实现自动化测试的智能断言与异常处理策略在现代Web应用开发中,*
java·前端·python·selenium
关中老四43 分钟前
【原生JS甘特图MZGantt 】如何给父任务设置独立进度条
前端·javascript·甘特图