用 display: flex 实现两栏等宽最直接：父容器设 display: flex，子元素均设 flex: 1（等价于 flex: 1 1 0），并加 min-width: 0 防溢出；避免 width: 50%。

用 display: flex 实现两栏等宽最直接

不用算百分比，也不用嵌套容器，display: flex 是目前最稳妥、兼容性最好（Chrome 29+/Firefox 20+/Safari 6.1+）的方案。关键就两步：父容器设 display: flex，两个子元素都设 flex: 1。

• flex: 1 等价于 flex: 1 1 0，表示「等比例分配剩余空间，且基础尺寸为 0」，天然实现严格等宽
• 如果子元素本身有固有宽度（比如含图片或长文本），加 min-width: 0 防止溢出撑破布局
• 避免写 width: 50% —— 它不响应父容器 padding 或 border，还容易因 box-sizing 不一致导致错位

grid-template-columns: 1fr 1fr 更语义化但需注意浏览器支持

如果你的项目不需要支持 IE 或旧版 Safari（display: grid 是更干净的选择，尤其当后续可能扩展为三栏、带间隙或响应式变化时。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

• grid-template-columns: 1fr 1fr 明确表达「两列均分」，比 flex 更具可读性
• 想加间距？直接用 gap: 16px，不用在子元素上反复调 margin
• IE 完全不支持 Grid，哪怕加了 @supports (display: grid) 也得配 fallback，别指望它自动降级

别碰 float 和 inline-block 这类老方案

它们在现代开发里不是“能用”，而是“埋雷”。即使看起来排好了，也会立刻暴露问题：

• float: left 后必须清浮动，否则父容器高度塌陷 —— overflow: hidden 或伪元素都只是补丁，不是解法
• display: inline-block 会把换行符/空格渲染成空白间隙，硬塞 font-size: 0 又影响子元素文字继承
• 两者都不支持垂直居中、等高对齐，一旦内容高度不同，视觉就错乱

移动端适配时别忘了加 flex-wrap 或媒体查询

等宽两栏在小屏上通常要改成单列，这点很多人忽略，直到 QA 提 bug 才补。

• 用 flex-direction: column + width: 100% 最简单，但只适用于纯内容块，不适用于需要保持横向关系的组件（如表单左右标签+输入框）
• 更稳妥的是媒体查询：@media (max-width: 768px) { .container { flex-direction: column; } }
• 千万别只改 flex: 1 为 flex: none 就完事 —— 没重置 width 的话，子元素可能仍按原宽度撑开

实际开发中最容易被忽略的，是子元素内部的盒模型和最小尺寸约束。一个 img 标签没设 max-width: 100%，或者一段超长英文没加 word-break: break-word，就能让整个等宽布局在某台设备上突然崩掉。

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