使用视频时的布局问题

Question

我在设计中遇到了一些布局问题： http://testing004.compoundeyedesign.com/

我正在尝试在Airbnb的主页上复制视频/搜索框布局。事实上，我现在正在我的页面中使用他们的视频。 The problems I'm having are screengrabbed here.但基本上他们是：

1. 如何将带有表格的紫色框与视频重叠或至少显示没有间隙？
2. 如何防止视频在桌面浏览器上变得如此之高，以至于下面的紫色框和文字被推到了首位？

我已经尝试过使用CSS和HTML，尝试改进我所拥有的东西，但你现在看到的是我能得到的最好的东西。任何指向推动这个朝向正确方向的指针都会受到欢迎。

谢谢！罗素

Answer 1

如果您希望紫色框位于视频顶部，则需要使用position：static;。基本上是这样的：

#purplebar {
  position: absolute;
  width: 100%;
  top: 100px;
}

<div class="wrap">
  <div id="video"></div>
  <div id="purplebar"></div>
</div>

如果您只是想连接两个元素（删除白色），请使用您的检查元素工具找出导致差异的边距/填充，并将其删除。