Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您的CSS布局让display: table和display: relative感到困惑。它们并不像你拥有它们那样兼容。布置.container和aside的首选方法是使用f loats。我修改了你的例子，使这两个容器彼此相邻（大约以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;
}

div在显示中没有填充空格：table;

1 个答案: