Question

我的主体其余部分位于div下方，顶部包含我的iframe视频。我对iframe和div容器使用了绝对单位。

我无法弄清楚为什么加宽视图窗口后，iframe下方的文本向下移动到页面上。

    .vid-1  {
      position: relative;
      width: 100%;
      height: 0;
      padding-bottom: 56%;
      margin: 8px 0 0 0;
    }

    iframe  {
      width: 100%;
      height: 100%;
      position: absolute;
      display: block;
      top: 0;
      left: 0;
    }

    @keyframes righttoleft {
      0%  {
        transform: translateX(100%);
      }
      100%  {
        transform: translateX(0);
      }
    }

    @media only screen /* Tablet */

    .vid-1  {
      display: inline-block;
      justify-content: center;
      width: 1000px;
    }

    iframe  {
      width: 100%;
      height: 562px;
      position: absolute;
      display: block;
      top: 0;
      left: 0;
    }

<main>
          <div class="vid-1 lefttoright">
            <iframe src="https://www.youtube.com/embed/momqQl-9-tg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
          </div>
          <h1 class="text-style">Common Questions</h1>
          <div class="line"></div>

</main>

Answer 1

当您设置带有百分比（例如padding-bottom: 56%;）的填充/边距时，该百分比是相对于元素的宽度。因此，当您将元素的宽度设置为100％并加宽窗口时，该元素将变宽，从而相应增加了底部填充。

尝试对底部填充使用绝对单位，例如padding-bottom: 50px。让我知道是否有帮助。

Answer 2

padding-bottom: 56%;，此CSS是隐藏标题文本的原因。不断填充。

.vid-1 {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56%;
    margin: 8px 0 0 0;
}

为什么增加查看窗口的大小时此文本会移动？

2 个答案: