如何在HTML页面的div中实现iframe与段落同行排版

你可以通过Flex布局快速实现iframe与描述内容并排的效果，同时注意iframe使用scale缩放后会保留原始尺寸占位的问题，需要调整对应容器的宽高避免产生多余空白：

方案1：Flex布局（推荐，现代浏览器通用） #

.element {
  /* 启用Flex布局实现子元素同行排列 */
  display: flex;
  /* 子元素垂直居中对齐，可改为flex-start实现顶部对齐 */
  align-items: center;
  /* 两个区块的间距 */
  gap: 20px;
  width: 100%;
}
.preview {
  /* 按iframe缩放0.5后的实际显示尺寸设置容器大小 */
  width: 320px;
  height: 180px;
  overflow: hidden;
  position: relative;
}
.preview iframe {
  /* 偏移修正iframe缩放后的位置 */
  position: absolute;
  left: -160px;
  top: -90px;
}
.description {
  /* 描述区域自动占满剩余宽度 */
  flex: 1;
}

方案2：浮动布局（兼容低版本浏览器） #

.element {
  overflow: hidden; /* 清除浮动 */
  width: 100%;
}
.preview {
  width: 320px;
  height: 180px;
  overflow: hidden;
  position: relative;
  float: left;
  margin-right: 20px;
}
.preview iframe {
  position: absolute;
  left: -160px;
  top: -90px;
}
.description {
  overflow: hidden; /* 触发BFC避免文字环绕 */
}

如果不需要对iframe内部页面做缩放，可以直接移除iframe的transform属性，把iframe的宽高设置为实际需要的显示尺寸，就不需要额外处理preview容器的定位偏移了。

内容的提问来源于stack exchange，提问作者Luqus