Question

我有一个两列的部分，一面包含一个视频，另一面包含文字。

它们都是50％的宽度，我希望它们具有相同的高度，因为它们一起响应

＆＃13;

section {
  width: 1000px;
}

.half {
  width: 50%;
  position: relative;
  float: left;
}

.grey {
  background: #f5f5f5;
}

＆＃13;

<section>
  <div class="half grey one">
    <p>text goes here.</p>
  </div>
  <div class="half">
<iframe  src="https://www.youtube.com/embed/8kyWDhB_QeI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
</section>

＆＃13;

左栏中的文字也需要始终保持中央，水平和垂直。

Answer 1

您可以使用 Flexbox 执行此操作：

section {
  display: flex; /* displays flex-items (children) inline where the height of all items is dictated by the height of the "tallest" one (achieved by the default "align-items: stretch") */
  width: 1000px;
}

.half {
  width: 50%;
  position: relative;
  /*float: left; not necessary */
}

.grey {
  display: flex;
  justify-content: center; /* horizontally centered */
  align-items: center; /* vertically centered */
  background: #f5f5f5;
}

<section>
  <div class="half grey one">
    <p>text goes here.</p>
  </div>
  <div class="half">
    <iframe  src="https://www.youtube.com/embed/8kyWDhB_QeI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
</section>

视频列高度匹配

1 个答案: