css hover：在底部对齐：如何在顶部对齐？

Question

这是css：

.divPhoto {
    border:1px solid #999;
    width:140px;
    height:140px;
    border-radius:3px;
    background-color:#EEE;
    display:inline-block;
    margin:10px;
    transition:0.5s;
    overflow:hidden;
}
.divPhoto:hover {
    border:1px solid #0000FF;
    background-color:#CCC;
    cursor:pointer;
    height:175px;
}



foreach($photos as $photo) { ?>

    <div class="divPhoto" >
        <a class="fancybox" data-fancybox-group="gallery" href="upload/<?=$photo->filename?>"><img class="img-polaroid" src="upload/thumb/<?=$photo->filename?>"></a>
        <input type="button" class="btn btnEffacer" value="effacer" style="margin-left:30px;" data="<?=$photo->id?>" />
    </div> 


<? } ?>

任何关于将悬停在底部而非顶部对齐的想法？ 因为现在所有的图片都在移动一个imahe

时移动

Answer 1

vertical-align:top规则的.divPhoto就足够了。

Answer 2

由于您将悬停时的高度从140px更改为175px，因此在未悬停状态下需要一些额外的边距底部以将其填充到175px高度。

Answer 3

您应该display:inline-table;使用.divPhoto div

<强> Fiddle

.divPhoto {
    border:1px solid #999;
    width:140px;
    height:140px;
    border-radius:3px;
    background-color:#EEE;
    display:inline-table;  /* <= this line */
    margin:10px;
    transition:0.5s;
    overflow:hidden;
}

Answer 4

由于元素是内联块，因此您只需使用vertical-align: top：

.divPhoto {
    border:1px solid #999;
    width:140px;
    height:140px;
    border-radius:3px;
    background-color:#EEE;
    display:inline-block;
    margin:10px;
    transition:0.5s;
    overflow:hidden;
    vertical-align: top;
}

http://jsfiddle.net/Dtejn/