最省事且不易出错的两栏布局方案是用 display: flex。父容器必须设 display: flex 启动布局；左栏用 flex: 0 0 200px（或 auto + min-width），右栏用 flex: 1 并加 word-break: break-word 和 min-width 防溢出与过窄；等高靠父容器默认 align-items: stretch。

直接用 display: flex 最省事，也最不容易出错。别碰 float，除非你在修十年前的老项目。

父容器设 display: flex 是前提

没这句，后面所有设置都无效。它不是可选配置，是启动 Flex 布局的开关。

• 必须加在两栏的共同父元素上，比如 <main></main> 或 <div class="layout"> <li>不用写 <code>flex-direction: row——默认就是横向排列，但显式写上更防被重置样式覆盖
• 如果父容器本身是 <header></header> 或 <footer></footer>，别直接套 flex，容易拉伸高度；建议只对 <main></main> 这类主体容器用

左栏用 flex: 0 0 200px，不是 width: 200px

width 只控制基础宽度，但内容一多就可能撑开或压缩；flex: 0 0 200px 明确告诉浏览器：不增长、不收缩、就按 200px 来。


Doc To HTML
使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。
下载
• 数值可以换成 240px、15rem 等，但别用百分比（如 20%），否则失去“固定”语义
• 如果左栏内容极窄（比如只放个图标），想让它由内容撑宽，改用 flex: 0 0 auto + min-width: 180px
• 别给左栏设 flex: 1，否则它会和右栏抢空间，结果两边都变窄

右栏用 flex: 1，但要防文字溢出

flex: 1 让右栏吃掉所有剩余空间，但它不管内容是否换行——长串英文、数字、URL 不带空格时，会直接撑破容器。

• 必须加 word-break: break-word 或 overflow-wrap: break-word 到右栏样式里
• 如果右栏还要最小宽度保护（比如小屏下不能窄于 300px），补一句 min-width: 300px
• 别给右栏设 width: 100%，Flex 下它会和 flex: 1 冲突，导致布局错位

别指望左栏自动等高，得靠父容器

左栏高度默认只由自己内容决定，哪怕右栏有 50 行文字，左栏也不会拉长——这不是 bug，是 CSS 默认行为。

• 要等高，只需确保父容器没被重置 align-items，默认值 stretch 就够了
• 如果用了 CSS 重置库（比如 normalize.css 或某些 UI 框架），检查是否覆盖了 align-items: stretch，手动加回去
• display: grid 同样默认等高，但 IE 完全不支持；float 方案天生不等高，得靠伪等高 hack，不推荐

真正容易漏的是：右栏的换行控制和父容器的 align-items 状态。这两处不出问题，flex 两栏就基本稳了。