不显示空白的div：table;

Question

我创建了一个幻灯片，在它的右边有divs，当你将鼠标悬停在它们上面时，它们会被放大，当你将光标从div上缩小时，它会缩小。但是，旁边（divs父母）是在它应该是正确的地方，它是不填补旁边元素顶部的divs。我怎样才能让div填补旁边的元素，而不是破坏别的东西？

.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。我修改了你的例子，将这两个容器相互靠近浮动（宽度大约为80/20）。这有助于使您的布局响应。

工作codepen： 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; 
}