html - 如何内联放置视频和图像，每个宽度为父级宽度的一半？

Question

我想将视频和图像并排放置，均为父级的 50%。下面是我试过的代码。在我看来，每个包装 div 应该是内联的，50%；子元素填充宽度。

HTML:

<div>
   <div class="video-container">
    <video poster="Resources/css/img/ioposter.png" controls="true" muted loop>
        <source src="/Resources/img/vid.mp4"  type="video/mp4">
        Your browser does not support the video tag.
    </video>
   </div>
   <div style="width:50%;display:inline-block;">
     <img style="width:100%;" src="Resources/myimg.jpg">
   </div>
</div>

CSS:

.video-container {
   position: relative;
   padding-bottom: 56.25%;
   padding-top: 0px;
   height: 0;
   overflow: hidden;
   display: inline-block;
   width:50%;
   vertical-align: top;
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
} 

Answer 1

我创建了一个用于测试的快速 jsFiddle:https://jsfiddle.net/L5euvkzm/2/

.wrapper {
    font-size: 0;
}

我所做的就是向外部 div 添加一个类，然后应用 font-size: 0;发生这种情况的原因是因为两个容器之间添加了空白。有其他方法可以解决这个问题，但我更喜欢这种方式，因为它可以让元素很好地并排堆叠。