用 display: flex 实现双列并排最可靠：父容器设 display: flex 和 gap，子元素用 flex: 1（均分）或 flex: 0 0 240px（固定宽），避免 width: 50% 导致溢出；移动端通过媒体查询切 column；grid 更适合结构明确场景，但 ie11 不支持。
用 display: flex 实现双列并排最可靠
现代项目里，display: flex 是双列并排的首选方案，它天然支持等高、对齐、响应式切换，且不依赖浮动或定位带来的副作用。
常见错误是直接写 width: 50% —— 一旦加了 padding 或 border，两列就会溢出换行；或者父容器没清除浮动，导致后续内容上浮。
- 父容器设
display: flex和gap: 8px（比用margin更安全，不干扰盒模型） - 两个子元素都设
flex: 1，自动均分剩余空间，内容撑开也不错位 - 若需左侧固定宽度（如侧边栏），用
flex: 0 0 240px，右侧用flex: 1 - 移动端切单列？加媒体查询：
@media (max-width: 768px) { .container { flex-direction: column; } }
display: grid 适合结构明确的双列
当你清楚列宽关系（比如“左栏固定 + 右栏自适应”或“严格等宽”），display: grid 语义更清晰、代码更少。
注意：IE11 不支持 grid，如果必须兼容，得回退到 display: table 或 JS 补丁。
- 左侧固定 250px、右侧自适应：
grid-template-columns: 250px 1fr - 等宽双列（推荐）：
grid-template-columns: 1fr 1fr（不是50% 50%，1fr按剩余空间动态分配） - 列间距统一用
gap: 12px，别用margin，否则可能破坏轨道计算 - 避免混用
grid和float，后者会脱离文档流，导致网格容器高度塌陷
别再用 float 做双列布局
float 的本职是图文环绕，不是页面布局。硬用来做双列，问题集中爆发在三处：父容器高度塌陷、子列错位、响应式难控制。
典型现象：第二列突然掉到下一行，只因为第一列多了一行文字；或者整个右栏“消失”，其实是父容器 height: 0 导致背景和边框不可见。
- 如果维护老项目非用不可，务必给父容器触发 BFC：加
overflow: hidden或伪元素::after { content: ""; display: table; clear: both; } - 宽度别写死
width: 50%，改用calc(50% - 4px)预留gap空间 - 移动端想切单列？
float很难优雅处理，不如直接切到flex-direction: column
纯文本多列用 columns 属性
仅适用于大段连续文本（比如新闻正文、长文章），目标是提升阅读效率，不是控制独立模块的并排。
它的排列顺序是“从上到下填满第一列，再进第二列”，和视觉直觉中的横向并列不同，不适合图文块或卡片类布局。
- 设列数：
columns: 2（两列） - 设列宽（推荐）：
column-width: 300px（浏览器按此宽度自动算列数，响应式更自然） - 加列间距：
column-gap: 1.5rem；加列线：column-rule: 1px solid #eee - 注意：
columns对子元素（如div、img）无效，只作用于文本流
双列布局真正容易被忽略的，是盒模型细节——padding、border、box-sizing 这几个参数一动，flex: 1 和 grid 的表现就可能完全不同。写完先用浏览器 devtools 检查实际占用宽度，比凭经验猜更靠谱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
