0

前

翻车时

这是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 时都在移动

4

4 回答 4

1

一个规则应该足够了vertical-align:top。.divPhoto

于 2013-10-07T21:24:28.850 回答
0

由于您将悬停时的高度从 140px 更改为 175px，因此您需要在未悬停状态下增加一些 margin-bottom 以将其填充到 175px 高度。

于 2013-10-07T21:18:42.967 回答
0

你应该display:inline-table;使用.divPhotodiv

小提琴

.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;
}
于 2013-10-07T21:21:08.057 回答
0

由于元素是内联块，您可以简单地使用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/

于 2013-10-07T21:24:51.340 回答