Question

我正试图展示我在网站上所做的最好的发型。

当您将鼠标悬停在图像上时，它会提供有关每种样式的一些信息。悬停工作正常并显示，但即使我在信息div上将高度设置为100％，它也只占用文本所需的足够空间。我正在使用display：table来使文本垂直居中“在图像上”。当我将其更改为显示块时，它工作正常，但垂直居中是必须的。这非常讨厌＆amp;经过2个小时的摆弄，我根本无法让它发挥作用。请帮忙！ http://jarahairandmakeup.tumblr.com/

    div.post {
    width: 50%;
    height: auto;
    position: relative;
    float: left;
}

div.information {
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.65);
    text-align: center;
    z-index: 2;
    opacity: 0;
}

div.post:hover .information { opacity: 1 !important; }

div.info {
    color: #fff;
    display: table-cell;
    vertical-align: middle;
    font: 11px/1.4 'Gudea';
    letter-spacing: .3em;
    text-transform: uppercase;
    padding: 0 5%;
}

div.info h3 {
    font: 100 20px/1 'Gudea';
    margin: 0; padding: 0;
    letter-spacing: 6px;
}

div.info hr { color: #fff; background: #fff; margin: 20px auto;}

div.image {
    float: left;
    position: relative;
    z-index: 1;
}

div.image img.hairstyle {
    width: 100%;
    height: 100%;
    display: block;
}


<div class="post">
        <a href="/ciara">
        <div class="information">
            <div class="info">
                <h3>CURLED UPDO</h3>
                <hr />
                A romantic style updo with braided accents for prom
            </div>
        </div>
        <div class="image">
            <img src="http://static.tumblr.com/ww0u3rz/BRjn5dotq/img_0919.jpg" class="hairstyle">
        </div>
        </a>
    </div>

我想这样做，所以信息div的黑色背景占据了照片的整个长度。

Answer 1

使用display：block而不是table。

编辑：只需使用包装器包装info div并使用以下css：

display: table;
position: absolute;
height: 100%;
width: 100%;

效果很好：http://cloud.kerim.me/image/2p3W1x011m0I

div占父母身高

1 个答案: