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>
相关推荐
子醉20 小时前
推荐一种适合前端开发使用的解决本地跨域问题的办法
前端
Niyy_20 小时前
前端一个工程构建多个项目,记录一次工程搭建
前端·javascript
xiangxiongfly91521 小时前
CSS link标签
前端·css
岁月宁静1 天前
AI 多模态全栈应用项目描述
前端·vue.js·node.js
十年磨一剑~1 天前
html+js开发一个测试工具
javascript·css·html
nn_(nana)1 天前
修改文件权限--- chmod ,vi/vim,查看文件内容,yum-软件包管理器,systemctl管理系统服务
前端
汪汪队立大功1231 天前
JavaScript是怎么和html元素关联起来的?
开发语言·javascript·html
烛阴1 天前
从零开始掌握C#核心:变量与数据类型
前端·c#
han_1 天前
前端高频面试题之Vuex篇
前端·vue.js·面试