Question

我创建了一个flexbox容器元素，其iframe位于右侧。

但是，我想在文本的左侧使用不同的标签，使两层甚至三层文本均匀分布在宽度上：1000px；保证金：0自动; div我有。可能是H3标头和P。

目前他们并肩。 Flexbox显然为P创建了另一个项目。

是否有办法将P降低到H3以下并使其表现为使其位于该项目的中心？另外，我还需要P不要溅出物品并进入iframe（最大宽度？）

HTML：

    <main>
      <div class="vid-1">
        <h3 id="hide" class="chan-h3-shift">A comprehensive view on the Oculus Go</h3>
        <p id="hide" class="chan-p-shift">This review</p>
        <iframe class="lefttoright" src="https://www.youtube.com/embed/momqQl-9-tg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
    </main>

CSS：

    #hide  {
      display: block;
    }

    .vid-1  {
      display: flex;
      width: 1000px;
      padding-bottom: 300px;
      margin: auto;
    }

    iframe  {
      width: 50%;
      height: 300px;
      position: absolute;
      display: block;
      transform: translate(500px, 0)
    }

    .chan-h3-shift  {
      font-size: 0.9em;
      padding: 0 0 0 60px;
    }


    .chan-p-shift  {
      padding: 0 800px 0 60px;
    }

    @keyframes lefttoright {
      0%  {
        transform: translateX(-100%);
        opacity: 0;
      }
      100%  {
        transform: translateX(0);
      }
    }

    .lefttoright  {
      animation-name: lefttoright;
      animation-duration: 3s;
    }

Answer 1

如果要将p和h3放在另一个之上，最好的方法是使用另一个div来包装它们：

 <div class="vid-1">
  <div class="column"> 
    <h3 id="hide" class="chan-h3-shift">A comprehensive view on the Oculus Go</h3>
    <p id="hide" class="chan-p-shift">This review</p>
  </div>
  <iframe class="lefttoright" src="..."></iframe>
 </div>

使用此CSS：

.column {
  display: flex;
  flex-direction: column;
}

这有用吗？

是否可以使用一个flex项目添加文本的层（更多行）？

1 个答案: