javascript - div 未填充显示中的空白区域 : table;

Question

我创建了一个幻灯片，在它的右边有 div，当你将鼠标悬停在它们上面时它们会放大，当你将光标从 div 上移开时它会缩小。但是，aside(div 父元素)位于它应该在的正确位置，是 div 没有填充 aside 元素的顶部。如何让 div 填充 aside 元素而不破坏其他任何元素？

.thing {
  height: 120px;
  width: 250px;
  z-index: 10;
  position: relative;
  border: 5px solid brown;
}
.thing:hover {
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 11;
}
.report {
  text-align: left;
  vertical-align: top;
  display: table;
  width: 100%;
}
.aside {
  display: table-cell;
  padding-top: 5px;
  width: 250px;
  border-radius: 10px;
  border: 2px solid black;
  overflow: hidden;
  position: relative;
  height: 385px;
}
.container {
  position: relative;
  width: 750px;
  height: 400px;
  border-radius: 5px;
  border: 1px solid black;
  overflow: hidden;
}

<div class="report">
  <div id="imgGallary" class="container">
    <img src="images/companies.png" alt="" width="750" height="400" />
    <img src="gallery" alt="" width="750" height="400" />
  </div>
  <aside class="aside">
    <div id="c1"></div>
    <div class="thing" style="background-color: blue;">
      <h1>Find Us!</h1>
    </div>
    <div class="thing" style="background-color: orange;"></div>
    <div class="thing" style="background-color: pink"></div>
  </aside>
</div>

Answer 1

您的 CSS 布局混淆了 display: table 和 display: relative。它们不兼容，就像您拥有它们一样。布局 .container 和 aside 的首选方法是使用 f loats .我修改了您的示例，使这两个容器彼此相邻 float (宽度大约为 80/20)。这样做的额外好处是让您的布局具有响应性。

工作代码笔: http://codepen.io/staypuftman/pen/vKoPmw

.thing {
  height: 120px;
  width: 250px;
  position: relative;
  border: 5px solid brown;
}
.thing:hover {
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
.report {
  text-align: left;
  vertical-align: top;
  display: table;
  width: 100%;
}
.aside {
  padding-top: 5px;
  width: 18%;
  border-radius: 10px;
  border: 1% solid black;
  overflow: hidden;
  float: left;
  position: relative;
  height: 385px;
}
.container {
  float: left;
  width: 80%;
  height: 400px;
  border-radius: 5px;
  border: 1px solid black;
  overflow: hidden;
}