1
  • 我有一篇文章在网格内。
  • 文章正文跨越 6 列
  • 我需要文章正文中的一项来全宽（超过 6 列容器）
  • 我尝试制作全宽的元素是视频/ iframe，需要保持 16:9 的纵横比
  • 视频/iframe 绝对定位

这是到目前为止的代码笔。

https://codepen.io/miteshsevani/pen/xxEGQdX

.container {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 1536px;
  padding-bottom: 24px;
  padding-left: 48px;
  padding-right: 48px;
  width: 100%;
}

.grid {
  display: grid;
  flex-wrap: nowrap;
  grid-gap: 16px;
  grid-template-columns: repeat(12, 1fr);
  margin-left: 0;
  margin-right: 0;
  list-style-type: none;
  margin: 0 -8px;
  padding-left: 0;
}

.article__layout {
  grid-column: 2/9;
  width: auto;
  padding-top: 8px;
  padding-left: 0;
  padding-right: 0;
}

.video-player.u-align--full-width {
  display: grid;
  grid-gap: 16px;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 32px;
  position: relative;
  width: 100vw;
  height: auto;
  padding-bottom: 56.25%;
  padding-bottom: 0;
}

.u-align__wrapper {
  padding-bottom: 56.25%;
  position: relative;
  width: 100vw;
  grid-column: 1/7;
  align-items: center;
  /* display: flex; */
  grid-column: 1/-1;
  justify-content: center;
  vertical-align: middle;
}

.video-player__source.u-align__container {
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
<div class="container">
  <div class="grid">
    <div class="article__layout">
      <div>
        <div class="article-body-text">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent tristique magna sit amet purus gravida. Leo integer malesuada nunc vel risus. Mi sit amet mauris commodo quis
            imperdiet.</p>

          <!-- VIDEO BLOCK START -->

          <div>
            <div class="alignBodyVideoPlayer">
              <div clas="video-player u-align--full-width">
                <div class="u-align__wrapper">
                  <iframe class="video-player__source u-align__container" width="640" height="360" src="https://www.youtube.com/embed/C0DPdy98e4c">
                </iframe>
                </div>
              </div>
            </div>
          </div>

          <!-- VIDEO BLOCK END -->


          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent tristique magna sit amet purus gravida. Leo integer malesuada nunc vel risus. Mi sit amet mauris commodo quis
            imperdiet.</p>
        </div>
      </div>
    </div>
  </div>
</div>

有谁知道我怎样才能让它全宽/边到边？

谢谢

4

2 回答 2

1

我建议grid在你的设计中删除你的类，并从我观察到width:100%的类中添加到类中包含。.u-align__wrapper.u-align__wrapperwidth:100vw

这是完整的预览。

.container {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 1536px;
  padding-bottom: 24px;
  padding-left: 48px;
  padding-right: 48px;
  width: 100%;
}

.grid {
  display: grid;
  flex-wrap: nowrap;
  grid-gap: 16px;
  grid-template-columns: repeat(12,1fr);
  margin-left: 0;
  margin-right: 0;
  list-style-type: none;
  margin: 0 -8px;
  padding-left: 0;
}

.article__layout {
  grid-column: 2/9;
  width: auto;
  padding-top: 8px;
  padding-left: 0;
  padding-right: 0;
}

.video-player.u-align--full-width {
    display: grid;
    grid-gap: 16px;
    grid-template-columns: repeat(7,1fr);
    margin-bottom: 32px;
    position: relative;
    width: 100vw;
    height: auto;
    padding-bottom:56.25%;
    padding-bottom: 0;
}

.u-align__wrapper {
    padding-bottom: 56.25%;
    position: relative;
    width: 100%;
    grid-column: 1/7;
    align-items: center;
    /* display: flex; */
    grid-column: 1/-1;
    justify-content: center;
    vertical-align: middle;
}

.video-player__source.u-align__container {
  left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  height: 100%;
}
<div class="container">
  <div class="">
    <div class="article__layout">
      <div>
        <div class="article-body-text">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent tristique magna sit amet purus gravida. Leo integer malesuada nunc vel risus. Mi sit amet mauris commodo quis imperdiet.</p>
          
<!-- VIDEO BLOCK START -->
          
        <div>
          <div class="alignBodyVideoPlayer">
            <div clas="video-player u-align--full-width">
              <div class="u-align__wrapper">
                <iframe class="video-player__source u-align__container" width="640" height="360" src="https://www.youtube.com/embed/C0DPdy98e4c">
                </iframe>
               </div>                      
             </div>
           </div>
         </div>
          
<!-- VIDEO BLOCK END -->
          
          
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent tristique magna sit amet purus gravida. Leo integer malesuada nunc vel risus. Mi sit amet mauris commodo quis imperdiet.</p>           
        </div>
      </div>
    </div>
  </div>
</div>

于 2020-12-01T14:53:41.273 回答
1

尽我所能理解你的问题，如果你position: relative;从你的类中删除样式.u-align__wrapper并添加position: relative;到你的父 div，即.container类，那么视频将是全宽和全高的。

于 2020-12-01T15:02:22.563 回答