css – 如何将网格与视频播放器的高度对齐？

2023年9月12日 179次阅读

我这里有一个小提琴：
https://jsfiddle.net/dyrepk2x/494/

<div class="outer-container">
  <div class="inner-container">
      <div class="video-overlay">
        <div id="gridLayout">
              <div class="box1 box" slot="1">1</div>
              <div class="box2 box" slot="2">2</div>
              <div class="box3 box" slot="3">3</div>
              <div class="box4 box" slot="4">4</div>
              <div class="box5 box" slot="5">5</div>
              <div class="box6 box" slot="6">6</div>
              <div class="box7 box" slot="7">7</div>
              <div class="box8 box" slot="8">8</div>
              <div class="box9 box" slot="9">9</div>
              <div class="box10 box" slot="10">10</div>
              <div class="box11 box" slot="11">11</div>
              <div class="box12 box" slot="12">12</div>
              <div class="box13 box" slot="13">13</div>
              <div class="box14 box" slot="14">14</div>
              <div class="box15 box" slot="15">15</div>
  </div>
  </div>
        <video id="player" controls
    src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" autoplay loop></video>
</div>
</div>

这是CSS

.outer-container {
    border: 1px dotted black;
    width: 100%;
    height: 100%;
    text-align: center;
}
.inner-container {
    border: 1px solid black;
    display: inline-block;
    position: relative;
}
.video-overlay {
    position: absolute;
    left: 0px;
    top: 0px;
    margin: 10px;
    padding: 5px 5px;
    font-size: 20px;
    font-family: Helvetica;
    color: #FFF;
    background-color: rgba(50, 50, 50, 0.3);
}
video {
    width: 100%;
    height: 100%;
}
#gridLayout{
    float: left;
    width: 100%;
    position: fixed;
    z-index: 0;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
}
.box{
    border: 1px solid #000;
    float: left;
    width: 16.666%;
    position: relative;z-index: 0;
    height: 16.666%;
}

我希望6×6网格适合作为使用CSS的视频元素大小的叠加,它应该是响应,我如何实现这一点？

最佳答案
Update Code

你可以看到这个更新.你应该使用它的内边框为全宽框.像box-shadow：inset 0 0 0 1px rgb(0,0,0);没有填充,没有边距.video-overlay

点赞