如何让两个div并排显示：三种实用实现方法

如何让两个div并排显示，主流可直接落地的三种方式为浮动布局、弹性布局、网格布局，其中弹性布局兼容性适配现代所有浏览器项目，操作最简、稳定性较强，浮动布局适合简单静态并排场景，网格布局适合复杂多列规整排版，三种方法均有明确适用场景与适配边界，低版本IE8及以下浏览器仅支持浮动布局，不支持弹性与网格布局。

div并排显示之浮动布局方法

你可以通过给两个div设置float属性实现并排，分别为两个div添加float:left样式，让元素脱离默认文档标准流，向左贴合排列，同时为两个div设置固定宽度，宽度总和不超过父容器宽度，即可完成基础并排效果。常规使用中，两个子div宽度建议控制在父容器98%以内，预留少量间距，避免因边框、内边距叠加导致换行错位。

浮动布局存在明确缺陷，元素脱离标准流后会造成父容器高度塌陷，表现为父容器高度变为0，后续页面元素排版会出现错乱。解决该问题的常用方式是给父容器添加overflow:hidden样式，快速清除浮动影响，适配绝大多数简单页面布局场景。

div并排显示之弹性布局方法

弹性布局是当下前端开发适配度最高的div并排方案，核心操作是给两个div的父容器设置display:flex样式，父容器开启弹性布局模式后，内部子div会自动横向并排排列，无需手动设置浮动和固定宽度。你可以通过子元素flex属性自由分配宽度比例，设置flex:1可让两个div均分父容器宽度，设置固定像素宽度则可自定义尺寸。

该布局方式自带自适应特性，能够自动适配电脑、手机等不同尺寸设备屏幕，不会出现浮动布局的高度塌陷问题，排版稳定性大幅提升。W3C2017年发布的弹性布局规范，全面适配Chrome、Firefox、Edge等主流现代浏览器，仅老旧IE浏览器无法兼容。

div并排显示之网格布局方法

网格布局是规整式并排的最优方案，操作逻辑简单，给父容器设置display:grid，再通过grid-template-columns属性定义两列宽度，例如设置grid-template-columns:50%50%，即可让两个div精准等分并排。

网格布局的排版精度更高，可精准控制列宽、间距、对齐方式，适合需要严格规整布局的卡片、模块排版场景，缺点是针对简单两列并排场景，代码冗余度略高于弹性布局，轻量化场景使用性价比一般。

简单静态页面优先用浮动布局。

自适应、动态交互页面直接选用弹性布局，是目前行业主流选择。

该系列布局方法的适用边界为：仅针对块状普通div元素生效，若div设置了绝对定位、固定定位，或包含浮动遮挡元素，上述并排方法会失效，需要先清除定位样式再执行布局操作。

三个方案均无需额外引入插件，仅通过基础CSS样式即可实现，无额外性能损耗，适配绝大多数前端基础排版需求。