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>
相关推荐
110546540123 分钟前
11、参数化三维产品设计组件 - /设计与仿真组件/parametric-3d-product-design
前端·3d
爱笑的林羽28 分钟前
Mac M系列 安装 jadx-gui
前端·macos
运维@小兵34 分钟前
vue使用路由技术实现登录成功后跳转到首页
前端·javascript·vue.js
肠胃炎36 分钟前
React构建组件
前端·javascript·react.js
酷爱码43 分钟前
HTML5表格语法格式详解
前端·html·html5
hello_ejb31 小时前
聊聊JetCache的缓存构建
java·前端·缓存
堕落年代1 小时前
SpringSecurity当中的CSRF防范详解
前端·springboot·csrf
美酒没故事°1 小时前
纯css实现蜂窝效果
前端·javascript·css
GISer_Jing2 小时前
React useState 的同步/异步行为及设计原理解析
前端·javascript·react.js
mini榴莲炸弹2 小时前
什么是SparkONYarn模式?
前端·javascript·ajax