右侧固定、左侧自适应布局首选flex：HTML中左栏必须在前、右栏在后，容器设display: flex，左栏flex: 1且min-width: 300px，右栏width: 280px；grid更语义化但IE不支持；float方案仅用于老系统维护。
右侧固定、左侧自适应布局不能靠给右栏加 float: right 或单纯设 margin-left 解决，核心在于父容器如何分配空间，以及 HTML 元素顺序是否与布局逻辑一致。
flex 布局：现代项目首选，但 HTML 顺序必须是左栏在前、右栏在后
这是当前最可控、代码最少的方案，IE10+ 支持，无需清除浮动或计算 margin。
-
.container必须设display: flex，别漏掉；子项默认水平排列，不用额外写flex-direction: row - 左栏（主内容）用
flex: 1，它会自动占满剩余宽度；加min-width: 300px可防小屏下过窄 - 右栏（侧边栏）设
width: 280px即可，不要加flex: 0 0 280px—— 冗余且易引发收缩异常 - 常见错误：HTML 中右栏写在左栏前面，结果左栏被挤到下一行或宽度为 0；正确结构是：
<div class="container"> <div class="main">主内容</div> <div class="sidebar">右侧固定栏</div> </div>
- 若右栏内容含长英文/数字无空格，需在右栏加
word-break: break-word防溢出
grid 布局：语义最清晰，但不兼容 IE
适合明确知道是“两列结构”且无需支持旧浏览器的项目，写法直观，响应式切换也干净。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 父容器设
display: grid和grid-template-columns: 1fr 280px，表示左栏占剩余全部空间，右栏固定 280px - 子元素完全不用设
width、float或flex，否则会干扰轨道分配 - 加间隙直接用
gap: 12px，别用margin挤子元素，否则破坏列宽计算 - 小屏适配可用
grid-template-columns: minmax(280px, 1fr) 280px，但注意此时右栏可能无法撑开一列，需配合媒体查询重置 - IE 完全不支持
grid，Edge ≤15 同样失效；降级时必须回退到flex方案
float + margin：仅用于维护老系统，顺序和清浮动缺一不可
兼容 IE6，但副作用多，新项目里出现就是技术债信号。
立即学习“前端免费学习笔记（深入）”；
- 右栏必须
float: right并设width: 280px；左栏必须写在右栏前面，且设margin-right: 290px（比右栏宽多留 10px 防边界误差） - 父容器必须触发 BFC，推荐
overflow: hidden；但要注意它会裁剪box-shadow或position: absolute子元素 - 右栏高度无法自动撑高父容器——除非父容器有明确高度或用 JS 补齐，否则 footer 容易塌陷到右栏下方
- 响应式切单列时，整套 float 规则得重写；而
flex只需加一条flex-direction: column - 绝对定位方案（
position: absolute）虽能绕过顺序问题，但脱离文档流、影响可访问性、footer 定位难，不推荐
最容易被忽略的是高度对齐问题：所有方案中，左栏默认不会随右栏拉高，这不是 bug，是 CSS 默认行为；若需等高，重点检查父容器的 align-items: stretch 是否被其他样式覆盖，而不是给左栏硬加 height: 100%。
