html - 使用 CSS div 定位

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

看看如何使用 flex box。它使定位变得非常简单!

这是你可以做的事情的快速想法

.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>