最稳妥方案是用display: flex实现双栏布局：侧边栏设flex: 0 0 240px（不伸缩不收缩），主内容区设flex: 1并加min-width: 300px；小屏通过@media (max-width: 600px) { .container { flex-direction: column; } }切换为竖排堆叠，确保语义正确与响应式兼容。

直接用 display: flex 实现最稳妥，主内容区自适应、侧边栏固定宽、小屏自动堆叠，不用处理浮动塌陷或 Grid 兼容性问题。

用 display: flex 做左右双栏（博客主场景）

博客页典型结构是左侧导航/分类/作者信息 + 右侧文章列表或正文，display: flex 天然适配这种主辅关系。

• 父容器必须设 display: flex，漏掉这句整个布局就失效
• 侧边栏建议写成 flex: 0 0 240px（不伸缩、不收缩、固定宽），比只写 width: 240px 更稳，防内容撑开变形
• 主内容区写 flex: 1，它会吃掉剩余所有空间；如果怕窄屏下太挤，加 min-width: 300px
• 默认 align-items: stretch 让两栏等高，但某些 CSS 重置库会覆盖它，可显式补一句 align-items: flex-start 避免视觉突兀
• 别在子元素上同时写 width 和 flex，二者冲突，优先用 flex 控制分配逻辑

响应式切单栏时只改 flex-direction

小屏下双栏横排毫无意义，必须竖排。关键不是“隐藏一栏”，而是让 DOM 顺序自然堆叠——

在前、

在后，这样屏幕阅读器和 SEO 才能正确识别主次。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 媒体查询里只改一句：@media (max-width: 600px) { .container { flex-direction: column; } }
• 断点别硬套 768px，手机真实 viewport 多在 480px–600px，用 600px 更准
• 竖排后，原水平对齐方式可能失效，比如 align-items: flex-start 在 column 下变成控制“横向起点”，需要按需调整为 align-items: center 或 stretch
• 侧边栏如果有固定高元素（如头像图），加 max-width: 100% 和 height: auto 保比例，防止撑破容器

为什么别用 float 或 display: table

这两种方案在博客场景下全是负向收益：前者要手动清除塌陷、后者完全无法响应式，且都破坏语义结构。

• float 最常见错误是只给侧边栏 float: left，主内容区没处理，结果直接掉到下方；补救用 overflow: hidden 可能截断阴影或下拉菜单
• display: table 要求 HTML 结构极度严格：外层 display: table、中间 display: table-row、内层 display: table-cell，少一层就塌，移动端根本没法切单列
• 两者都会让屏幕阅读器误读结构——把导航栏当成表格单元格读，影响可访问性
• 现代项目里写这些，基本等于主动放弃维护性和扩展性

grid-template-columns 适合什么博客场景？

如果你的博客页未来可能扩展为三栏（比如加一个右侧广告位）、或需要精确控制列间隙与对齐，display: grid 比 flex 更清晰。

• 写法更直白：grid-template-columns: 240px 1fr（左栏固定、右栏占剩余）或 1fr 3fr（按比例分配）
• 列间距统一用 gap: 16px，别用 margin，否则响应式时容易错位
• 子元素无需任何浮动、flex 或 width，Grid 自动按轨道分配位置
• 注意移除子元素上残留的 float、display: inline-block 等干扰样式，它们会和 Grid 冲突
• IE11 不支持 Grid，如果真要兼容，得回退到 flex，而不是硬上 table

真正容易被忽略的是语义标签选择：

包主内容、

包侧边栏，而不是一堆

和

—— 这不仅影响 SEO 和可访问性，后期加无障碍支持或 SSR 渲染时，会多出好几倍调试成本。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！