Question

我在使用此CSS代码时遇到问题，我需要在右侧添加一列以放置2个广告，在左侧嵌入视频，但是视频的宽度必须为100％。

.title-video {
  font-size: 17px;
}

.video-preview {
  width: 100%;
  height: 460px;
}

.video-ad {
  position: relative;
  float: right;
  width: 36.3%;
  max-width: 338px;
  min-height: 1px;
  text-align: center;
  margin-left: 4px;
  text-align: right;
}

<div class="content">
  <h1 class="title-video">El Chavo del 8 - El Pollo asado de Doña Cleotilde (Capitulo Completo)</h1>
  <div class="content-video">

    <div id="video-ad">
      <a href="" target="_blank" rel="noopener"><img src="http://nuestroportal.mx/wp-content/uploads/2018/06/IMG-20180612-WA0010-338x235.jpg"></a>

      <a href="" target="_blank" rel="noopener"><img src="http://theindiaobserver.com/wp-content/uploads/2018/06/IMG-20180611-WA0013-338x235.jpg"></a>
    </div>

    <iframe class="video-preview" src="https://www.youtube.com/embed/L3YhvfTTQHg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

  </div>
</div>

Answer 1

看看如何使用弹性盒。它使定位事情变得真正容易！

这是您可以做的事的快速构想

.main-wrapper {
    display: flex;
    flex-direction: row;
}
.video {
    flex: 1; /*This would make your video div take up all the extra space that your column doesn't use*/
    background-color: green;
}
.ads {
    flex: 0 0 100px; /*You'd set whatever width you'd want for your right hand column */
    background-color: red;
}

``

<div class="main-wrapper"> 
    <div class="video">
        you're video can go here
    </div>
  
    <div class="ads">
        You're adds can go here
    </div>
</div>

Answer 2

使用flex-box可以解决这个问题。

/* New CSS */
.content-video {
  display: flex;
  flex-direction: row-reverse;
}
.video-preview {
  flex: 1;
}
video-ad {
  flex: 0;
}
/*****/
.title-video {
  font-size: 17px;
}
.video-preview {
  /* width: 100%; */
  height: 460px;
}
.video-ad {
  position: relative;
  float: right;
  width: 36.3%;
  max-width: 338px;
  min-height: 1px;
  text-align: center;
  margin-left: 4px;
  text-align: right;
}

<div class="content">
  <h1 class="title-video">El Chavo del 8 - El Pollo asado de Doña Cleotilde (Capitulo Completo)</h1>
  <div class="content-video">
    <div class="video-ad">
      <a href="" target="_blank" rel="noopener">
        <img src="http://nuestroportal.mx/wp-content/uploads/2018/06/IMG-20180612-WA0010-338x235.jpg" />
      </a>
      <a href="" target="_blank" rel="noopener">
        <img src="http://theindiaobserver.com/wp-content/uploads/2018/06/IMG-20180611-WA0013-338x235.jpg" />
      </a>
    </div>
    <iframe class="video-preview" src="https://www.youtube.com/embed/L3YhvfTTQHg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
</div>

使用CSS div定位

2 个答案: