Question

我已经使我的图像有目的地垂直重叠，但现在图像堆叠在彼此之上。我如何阻止这种情况发生？这是my site。

我尝试在图片上添加一个z-index，这个图片适用于之前的版面，但是还没有使用它 -

.home_post_box {
    float: left;
    width: auto;
    height: auto;
    margin-right: 356px;
    margin-bottom: 30px;
    position: relative;
    cursor: pointer;
    display: inline-block;
}
.home_post_box img {
    width: 371px;
    height: auto;
    padding-bottom: 20px;
    transform: -webkit-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
    -webkit-transform: rotate(-1deg);
    -webkit-backface-visibility: hidden;
    outline: 1px solid transparent;
    text-align: center;
    position:absolute;
    left:0px;
    top:0px;
    z-index:1;
    padding-left: 0px;
}

Answer 1

从我所看到的情况来看，您应该尝试将每一行图片封装在自己的<div>中，并将desktop-clear或tablet-clear元素放在这些行之间。

您也可以使用此clearfix trick进行清算，它有点清洁，但我不确定您要尝试做什么。也许它会有用。

Answer 2

可能这与您尝试的内容相近

.home_post_box {
float: left;
width: auto;
height: auto;
position: relative;
cursor: pointer;
display: inline-block;
}

.home_post_box img {
height: auto;
padding-bottom: 20px;
transform: -webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
-webkit-transform: rotate(-1deg);
-webkit-backface-visibility: hidden;
outline: 1px solid transparent;
text-align: center;
left: 0px;
top: 0px;
z-index: 1;
padding-left: 0px;
float: left;
}

停止堆叠图像

2 个答案: