HTML5中iframe横向并排需用CSS布局：一、Flexbox设父容器display: flex，子项flex: 1或固定宽；二、Float设float: left加清除塌陷；三、Inline-block配font-size: 0和vertical-align；四、Grid用grid-template-columns与gap。
如果您希望在HTML5页面中将iframe或其他框架元素横向并排显示，则需借助CSS布局机制实现视觉上的水平排列。以下是几种可直接应用的布局方法：
一、使用Flexbox实现iframe横向并排
Flexbox是HTML5推荐的现代布局方案，通过设置容器为flex显示模式，可自然控制子元素沿主轴方向（默认为水平）排列，并自动处理间距与对齐。
1、在HTML中创建一个包含多个iframe的父容器，例如
2、为该容器添加CSS样式：display: flex; flex-wrap: nowrap;。
立即学习“前端免费学习笔记（深入）”；
3、为每个iframe设置固定宽度或flex属性，例如flex: 1; 或 width: 300px;。
4、如需等宽分布且自适应容器，可对iframe统一设置flex: 1; 并确保父容器有明确宽度或使用width: 100%;。
5、若需间隔，可在iframe上添加margin-right，或使用gap属性（仅支持较新浏览器）：gap: 12px;。
二、使用Float实现iframe横向并排
Float是一种传统布局方式，适用于需要兼容旧版浏览器的场景；其原理是让元素脱离文档流并向左或右移动，后续元素环绕其周围，需配合清除浮动以避免父容器塌陷。
1、为每个iframe添加CSS属性：float: left;。
2、为每个iframe设定明确宽度，例如width: 48%;，确保总宽度不超过父容器（需预留间隙和边框空间）。
3、为父容器添加overflow: hidden; 或在末尾添加空div并设置clear: both;，以防止高度塌陷。
4、若需左右间距，可为iframe添加margin-left或margin-right，但需从总宽度中扣除相应像素值，否则可能换行：务必保证所有浮动元素的宽度+外边距之和 ≤ 父容器宽度。
三、使用Inline-block实现iframe横向并排
Inline-block使块级元素表现类似内联元素，可在同一行显示，同时保留块级元素的宽高设置能力；无需清除浮动，但需注意空白符带来的间隙问题。
1、将iframe的display属性设为inline-block。
2、为父容器设置font-size: 0;，并在iframe上重置font-size（如16px），以消除HTML中换行/空格导致的默认间隙。
3、为每个iframe设置vertical-align: top;，避免因基线对齐产生的错位。
4、为iframe指定宽度，例如width: 49%;，确保两个元素能并排且不折行。
5、如需间隔，可在iframe上使用padding或margin，但需同步调整宽度值，否则可能破坏并排效果：推荐用padding而非margin，避免外边距合并干扰布局。
四、使用CSS Grid实现iframe横向并排
CSS Grid提供二维布局能力，适合精确控制列数、列宽及间距；适用于已知iframe数量或需响应式列数变化的场景。
1、为父容器设置display: grid;。
2、使用grid-template-columns定义列结构，例如repeat(3, 1fr)表示三等分，或200px 1fr 200px表示固定-弹性-固定组合。
3、可选添加gap属性统一控制行列间距，例如gap: 10px;。
4、若iframe数量不确定，可用auto-fit配合minmax()实现响应式列数：grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))。
5、确保父容器具有足够宽度容纳至少一列，否则单列将强制撑满容器宽度。
