【css面试题】实现2栏布局 右侧自适应; 3栏布局 中间自适应

2栏布局 右侧自适应

flex

grid

table

float

html 复制代码
 <style >
    body{
        height: 400px;
    }
    .son1{
        width: 20%;
        height: 100%;
        float: left;
    }
    .son2{
        margin-left: 20%;
        height: 100%;
        
    }
   
  </style>
<body>        
    <div class="son1" style="background-color: #d2e085;"> A </div>
    <div class="son2" style="background-color: #7cdbe4;"> B </div>

</body>

absolute

3栏布局 中间自适应

相关推荐
Highcharts.js几秒前
React 应用中的图表选择:Highcharts vs Apache ECharts 深度对比
前端·javascript·react.js·echarts·highcharts·可视化图表·企业级图表
腹黑天蝎座几秒前
如何实现自定义的虚拟列表
前端·react.js
用户350144817925 分钟前
继承和原型链:js如何实现继承
前端
Bernard02156 分钟前
给普通人的 AI 黑话翻译手册:一文看懂 LLM、RAG、Agent 到底是什么
前端·后端
恋猫de小郭6 分钟前
JetBrains Amper 0.10 ,期待它未来替代 Gradle
android·前端·flutter
胖纳特8 分钟前
Seafile 文件预览增强方案:集成 BaseMetas Fileview 突破格式限制
前端·后端
梵得儿SHI10 分钟前
Vue 3 工程化实践:多页面路由配置 + Pinia 状态管理完全指南
前端·javascript·vue.js·vuerouter4·pinia状态管理的·模块化store设计·路由与状态管理
lxh011311 分钟前
电话号码的字母组合
java·javascript·算法
小李子呢021113 分钟前
为什么会有react和vue这些框架的出现
前端·vue.js·react.js