时间戳

首页 > 解决方案 > 为什么下面的图像行是从上面移动的？

html - 为什么下面的图像行是从上面移动的？

问题描述

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

我输出查找数组中的尽可能多的项目，但我认为这并不重要。我确定问题出在 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 示例：这里。

对于 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;
}

标签： htmlimage

解决方案

你必须指定属性box-sizing: border-box 在你的CSS：

块引用

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

推荐阅读