Question

由于某些原因，将鼠标悬停在某个项目上时，下一整行都会向下移动。

我输出了查找数组中所有项目的外观，但是我认为这并不重要。我确定这是HTML和CSS造成的。因此，它将创建一个链接，然后使用PHP获取该链接的信息，然后绘制一个div并在其中包含一些标题文本，然后结束该链接。

通过CSS设置图像padding-top的比例。我猜问题出在定位或转换上，但是我不确定如何解决。

echo '<div class="column">';
$backdrop   = $results->poster_path;
if (empty($backdrop) && is_null($backdrop)){
    $backdrop =  '/images/no-gambar.jpg';
} else {
    $backdrop = 'https://image.tmdb.org/t/p/w300'.$backdrop;
}
echo '<a href="movie.php?id=' . $id . '"><div class="imageFramed" 
style="background-image:url('.$backdrop.');">';

echo '<h4 class="centered">'.$title.'</h4></div></a>';

echo '</div>';

YouTube示例：Here。

对于CSS：

.imageFramed {
    position: relative;
    width: 100%;
    padding-top: 150%;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5%;
    max-width: 100%; 
    margin: 5%;
    transition: transform .2s;
}
.imageFramed:hover {
    border: 1px solid red;
    -ms-transform: scale(1.01); /* IE 9 */
    -webkit-transform: scale(1.01); /* Safari 3-8 */
    transform: scale(1.03); 
}
.imageFramed::after {
    display: block;
    position: relative;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #000000 100%);
    margin-top: -150px;
    height: 150px;
    width: 100%;
    content: '';
    border-radius: 5%;
}

.colour-overlay {
    width: 100%;
    border: 1px solid red;
}
/*Title*/

.centered {
    position: absolute; 
    bottom: 25px; 
    left: 0; 
    width: 100%; 
    padding: 0px 10px 0px 10px;
    z-index: 2;
}

Answer 1

您必须指定属性 box-sizing：border-box 在您的CSS中：

Blockquote

html {
  box-sizing: inherit;
}
body {
  box-sizing: border-box;
}

为什么下面的图像行从上方移动？

1 个答案: