在引入flexbox列和iframe flexbox行之后，iframe行根据文本的长度从左向右移动，并且文本不会在iframe上方对齐。因此，为了将文本对齐到iframes开始的最左边，也就是它们的正上方，我使用了相对定位。只有当每个p标记文本长度相同时，该黑客才起作用。如果它们发生变化，或者如果我均匀地增加它们的字符计数，则与iframes的对齐将中断。

以下是CSS:

.serv div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 83px;
  margin-right: 44px;
  margin-left: 44px;
}
.serv p {
  font-size: 10px;
  color: #000000;
  position: relative;
  flex-direction: column;
  left: 71.75px;
  top: -19px;
  margin-left: -72px;
}

是否有方法防止文本转换iframe行，是否有方法使文本在p标记文本长度变化的情况下，以与iframes一致的方式开始对齐？

示例:https://jsfiddle.net/gnoj1h0r/8/

顺晟科技：

不知道为什么要有额外的div元素，我看不出有什么用处。

如果我了解您要使用的布局，这将为您提供一个更干净的开始...

您有行（.serv）。在每一行中都有容器（.container）。容器的img/iframe+p是正常堆叠的，不需要任何特殊的CSS来排列左边缘。

然后将之前分隔容器的83px间隙移到容器中，作为分隔容器的边距。

在我看来，原始代码的最大问题是在纯div中有一个纯div（没有类）。并使用。serv div作为CSS选择器。该CSS将应用于。serv、和下的顶部div，该div下的所有div。这就是为什么行间隙应用于嵌套的div。CSS选择器如此不特定，HTML没有类，这给IMO带来了麻烦。最好使用类名和好的特定选择器，以避免意外的后果。

注意：我添加了一个额外的.serv行以显示换行。