如何将不同长度的文本 flexbox 元素与固定大小的 iframe flexbox 元素对齐？

Question

引入 flexbox 列和 iframe flexbox 行后，iframe 行会根据文本的长度从左向右移动，并且文本不会在 iframe 上方对齐。因此，为了对齐文本以从 iframe 开始的最左边开始，并在它们的正上方，我使用了相对定位。此 hack 仅在每个 p 标签文本的长度相同时才有效。如果它们不同，或者如果我统一增加它们的字符数，与 iframe 的对齐就会中断。

这里是 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 行，有没有办法使文本与 iframe 对齐，即使 p 标签文本长度不同？

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

Answer 1

不确定为什么要有额外的 div 元素，我看不出有任何用途。

如果我了解您想要的布局，这应该会让您有一个更清晰的开始...

您有行 (.serv)。每行内都有容器 (.container)。容器有 img/iframe + p 正常堆叠，不需要任何特殊的 CSS 对齐左边缘。

然后将之前用于分隔容器的 83px 间隙移至容器作为分隔容器的边距。

在我看来，您的原始代码最大的问题是在普通的 div 中有一个普通的 div（没有 classes）。并使用 .serv div 作为 CSS 选择器。 CSS 将应用于 .serv 下的顶级 div，和 div 下的所有 div。这就是行间隙应用于嵌套 div 的原因。有一个 CSS 选择器如此不明确和 HTML 没有 classes 在我看来是在招来麻烦。最好使用 class 名称和良好的特定选择器以避免意外后果。

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

.serv {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin-right: 44px;
  margin-left: 44px;
  border: 2px solid red;
}

.serv .container {
  margin-right: 83px; /* I moved this here to separate your container divs inside the row */
  border: 2px solid blue;
}

.serv p {
  font-size: 10px;
  color: #000000;
}

<div class="serv">
    <div class="container">
      <p>test test</p>
      <iframe style="background:grey" width="100" height="100" frameborder="0"> </iframe>
    </div>
    
    <div class="container">
      <p>test</p>
      <iframe style="background:grey" width="100" height="100" frameborder="0"> </iframe>
    </div>
  </div>
  
  <div class="serv">
    <div class="container">
      <p>test test</p>
      <iframe style="background:grey" width="100" height="100" frameborder="0"> </iframe>
    </div>
    
    <div class="container">
      <p>test</p>
      <iframe style="background:grey" width="100" height="100" frameborder="0"> </iframe>
    </div>
  </div>

如何将不同长度的文本 flexbox 元素与固定大小的 iframe flexbox 元素对齐？

How can I align varying length text flexbox elements to fixed-size iframe flexbox elements?

html

css

flexbox

margin

text-alignment