css如何让两个div并排：三种主流方案
css如何让两个div并排，优先用flex布局，给父容器添加display:flex即可快速实现并排，支持自动均分宽度、垂直居中与响应式换行；float浮动适合需要兼容IE8等老旧浏览器的旧项目，必须额外清除浮动避免父容器高度塌陷；inline-block方案代码简单，但会出现代码留白产生的间隙，需要在父级设置font-size:0来消除空白；三种方案都有明确适用边界，flex仅支持IE11及以上浏览器，老旧项目不能直接使用，新开发页面优先选用flex布局。
css如何让两个div并排：flex方案
你需要给两个div包裹一层父容器，给父容器写入display:flex，子元素默认横向排列，不需要额外清除浮动。
均分宽度直接给子div添加flex:1，两个盒子会平分父容器剩余宽度；想要固定宽度直接给子元素设置width属性，gap属性可以直接设置两个div之间的间距，不需要额外写margin。
若窗口宽度不足，添加flex-wrap:wrap就能自动换行，适配移动端布局。
css如何让两个div并排：float方案
直接给两个子div添加float:left，两个盒子会紧贴并排，不需要外层容器也能生效。
该方案最大缺陷是父容器会丢失高度，你必须通过清除浮动来修复问题，可给父容器添加overflow:hidden，或是在末尾添加空标签清除浮动。
这个方法只适合维护老项目，新项目尽量不要使用浮动布局。
css如何让两个div并排：inline-block方案
给两个子div设置display:inline-block，元素会变成行内块，横向排在同一行，同时可以正常设置宽高。
HTML代码里两个div之间的换行会产生空白间隙，你在父容器设置font-size:0，再给子元素重置字体大小，就能消除间隙。
垂直对齐容易出现错位，补充vertical-align:top可以把两个盒子顶部对齐。
| 布局方式 | 浏览器兼容 | 布局难度 | 适用场景 |
|---|---|---|---|
| flex布局 | IE11及以上现代浏览器 | 低 | 新项目、响应式页面、需要垂直对齐 |
| float浮动 | 全浏览器，包含IE8 | 中 | 维护老旧网页、简单横向排版 |
| inline-block | 全浏览器，包含IE8 | 中 | 简单横向菜单、少量并排模块 |
不要在窄容器里强行设置两个div宽度总和等于100%，边框与内边距会挤占宽度，导致第二个div自动换行。
css如何让两个div并排：代码示例
flex布局完整代码：父容器添加display:flex;gap:10px，两个子div设置flex:1，自动平分宽度。
浮动布局完整代码：子div添加float:left;width:50%，父容器添加overflow:hidden清除高度塌陷。
inline-block布局完整代码：父容器font-size:0，子div设置display:inline-block;width:50%;vertical-align:top，同时重置子元素font-size。
W3C发布的CSSFlexibleBoxLayout规范，已经把flex布局定为一维横向布局的标准实现方式，在2015年之后开发的网页都可以优先使用该方案。
