Question

我一直试图通过底部白色间距阅读其他人解决问题的方法。这是我的代码的等效版本。 JSFiddle当您将鼠标悬停在图像上方时，图像底部与叠加层底部之间会有5px的白色间距。似乎修复它的方法是将位置改为绝对而不是相对。但是，我有一个3网格设计，需要调整窗口大小调整大小。所以，我想知道是否有任何方法删除白色间距而不将所有内容都设置为绝对位置。

谢谢

我的HTML代码：

<body>
    <div id="content">
        <div class="grid3">
            <article class="bucket" >
                <a href="#">
                <div class="img-overlay"><h3>Monogram</h3></div>
                <img src="http://oi47.tinypic.com/16237rs.jpg" alt="Test image">
                </a>
            </article>

        <article class="bucket">
            <a href="#">
                <div class="img-overlay"><h3>Gastalt Composition</h3></div>
                <img src="http://oi47.tinypic.com/16237rs.jpg" alt="Test image">
            </a>
        </article>

        <article class="bucket">
            <a href="#">
                <div class="img-overlay"><h3>The Red Thread - A Visual Book</h3></div>
                <img src="http://oi47.tinypic.com/16237rs.jpg" alt="Test image">
            </a>
        </article>

        <article class="bucket">
            <a href="#">
                <div class="img-overlay"><h3>Typographic Hierarchy</h3></div>
                <img src="http://oi47.tinypic.com/16237rs.jpg" alt="Test image">
            </a>
        </article>

        <article class="bucket">
            <a href="#">
                <div class="img-overlay"><h3>Living in Two Spaces</h3></div>
                <img src="http://oi47.tinypic.com/16237rs.jpg" alt="Test image">
            </a>
        </article>  
        </div>
    </div>
</body>

我的CSS代码

@charset "UTF-8";

*{  
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
margin:0; }

html, body{
background: #fff;
height: 100%;
margin: 0;
padding: 0; }

#content{
    background: tan;
    float: left;
    padding: 0 3%;
    width: 100%; }

    a{ text-decoration: none; }

    .bucket{
        float: left;
        margin: 2% 3%;
        position: relative;
        width: 27.3%; }

        .grid3 .bucket:nth-of-type(3n+1){  clear: left; }

        .bucket img{ 
            height: auto;
            width: 100%; }

.img-overlay{
background-color: rgba(0,0,0,0.6);
bottom: 0px;
top: 0px;
opacity: 0;
overflow:hidden;
position: absolute;
width: 100%;
z-index: 1000;
transition: opacity 0.3s;
-webkit-transition: opacity 0.3s; }

.img-overlay h3{
    opacity: 1;
    display: inline-block;
    margin: auto;
    height: 20px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left:0;
    color: rgba(255,254,254,1.00);
    text-align: center;
    vertical-align: middle; }

.bucket:hover .img-overlay{ opacity: 1; }


/* Responsive */

@media screen and (max-width:740px){

.bucket{ 
    width: 44%; }

.grid3 .bucket:nth-of-type(3n+1){ clear: none; }
.grid3 .bucket:nth-of-type(2n+1){ clear: left; }

}

div元素下的额外白色间距

0 个答案: