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>
相关推荐
new【一个】对象11 小时前
前端的概述
html
zhoumeina9911 小时前
分段创建产品,tab 页切换又要保留缓存
前端·javascript
SilentSamsara11 小时前
命令行工具开发:Click/Typer + 打包为独立二进制
linux·服务器·开发语言·前端·python·青少年编程·fastapi
恋猫de小郭11 小时前
能在手机本地跑的图像生成模型 Bonsai Image ,效果还不错
前端·aigc·ai编程
Bigger11 小时前
实战:搭建 AI Code Review 自动化流水线
前端·ci/cd·自动化运维
IT_陈寒11 小时前
被Vite的HMR坑惨了,原来这样配置才能用对!
前端·人工智能·后端
怕浪猫11 小时前
Electron 开发实战(七):网络通信与 API 集成全解
前端·javascript·electron
凌览11 小时前
为什么我不推荐一人公司用PostgreSQL
前端·后端·node.js
王琦031811 小时前
shell 第二章 变量和引用
前端·chrome
暗中讨饭xdm11 小时前
立体echarts柱状图咋做
前端·vue.js·echarts