HTML5中实现iframe横向并排有五种CSS方案：一、Flexbox（推荐）；二、Float（兼容旧浏览器）；三、Inline-block（易控垂直对齐）；四、CSS Grid（精确列控制）；五、Table-cell（天然横向+垂直居中）。
如果您希望在HTML5页面中将多个iframe或其他框架元素横向并排显示，则需借助CSS布局机制实现。以下是几种可直接生效的并排方案：
一、使用Flexbox实现横向并排
Flexbox是HTML5推荐的现代布局方式，通过设置容器为flex显示模式，子元素可自动沿主轴（默认为水平方向）排列，支持等宽、自适应、对齐控制等特性。
1、在HTML中创建一个包含多个iframe的容器，例如
2、为该容器添加CSS样式：display: flex; 并设置flex-wrap: nowrap; 确保所有子项强制单行排列。
立即学习“前端免费学习笔记（深入）”；
3、为每个iframe设置固定宽度或flex属性，例如flex: 1; 实现等比例分配空间，或设置width: 300px; 指定具体像素宽度。
4、可选添加gap: 8px; 在相邻iframe之间插入统一间距，避免紧贴。
二、使用Float实现横向并排
Float是传统但兼容性极广的浮动布局方式，适用于需支持旧版浏览器的场景；需注意父容器清除浮动，否则可能导致高度塌陷。
1、为每个iframe添加CSS属性：float: left; 使其向左浮动排列。
2、为每个iframe设定明确的width值，例如width: 48%;，并配合box-sizing: border-box; 包含内边距与边框。
3、在容器末尾添加一个清除浮动的空元素，例如
，或对容器应用::after伪元素清除。4、确保容器具有足够宽度容纳全部浮动元素，否则末尾iframe将换行。
三、使用Inline-block实现横向并排
将iframe设为display: inline-block; 可使其像文本字符一样在行内依次排列，无需清除浮动，且支持垂直对齐控制。
1、为每个iframe设置display: inline-block; 和vertical-align: top; 避免因默认基线对齐导致的底部空白。
2、设置width属性（如width: 320px;），并确认父容器white-space: nowrap; 防止换行干扰。
3、若存在换行符或空格，可在HTML中删除iframe标签间的空白字符，或在父容器上设置font-size: 0; 后单独为iframe恢复字体大小。
4、为各iframe添加margin-right可实现间隔，最后一个元素需额外处理以避免多余右距。
四、使用CSS Grid实现横向并排
CSS Grid提供二维布局能力，此处利用其一维轨道定义实现精确横向排列，适合固定数量或响应式列数控制。
1、为容器设置display: grid; 并定义列轨道，例如grid-template-columns: repeat(3, 1fr); 表示三等分宽度。
2、若需固定宽度并排，可写为grid-template-columns: 400px 400px 400px; 或使用minmax()适配不同尺寸。
3、为容器添加gap: 12px; 统一控制列间距，无需在每个iframe上单独设置margin。
4、确保iframe自身不设置width: 100%;以外的覆盖性尺寸，以免破坏网格轨道计算。
五、使用Table-cell模拟并排
将容器设为display: table;，子元素设为display: table-cell;，可复用表格单元格的天然横向排列行为，具备良好垂直居中能力。
1、为容器添加display: table; width: 100%; 并可选设置border-spacing: 10px; 控制单元格间距。
2、为每个iframe包裹一层div，并将该div设为display: table-cell; vertical-align: middle;
3、为每个table-cell设置width属性，例如width: 33.33%;，或使用固定像素值如width: 350px;
4、注意table布局不支持flex或grid的响应式伸缩，需配合媒体查询手动调整断点。
