一行中的多个图像产生 1px 位置错误

Question

我目前遇到一行中有多个图像的问题。它们彼此相邻，但第一张之后的每张图片都向下移动了一个像素。

也许有人有我不知道的想法:(

link：已删除 （下面的投资组合部分就是我所说的）

html

#protfolio_sec .all-portfolios {
  margin-top : 20px;
  margin-left : -10px;
}
#protfolio_sec .single-portfolio {
  float : left;
  margin-bottom : 10px;
  width : 277px;
}
#protfolio_sec .single-portfolio:hover .img_hoverlay {
  display : block;
}

<div class="all-portfolios">
  <div class="col-sm-12  col-lg-12 col-md-12 col-xs-12 ">
    <div class="single-portfolio web-design">
 <a href="http://google.de" target="_blank" class="image-border"><img class="img-responsive" src="img/ptf/pre/test.jpg" alt=""></a>
    </div>    
  </div>    
  <div class="col-sm-12  col-lg-12 col-md-12 col-xs-12 ">
    <div class="single-portfolio web-design">
 <a href="http://google.de" target="_blank" class="image-border"><img class="img-responsive" src="img/ptf/pre/test.jpg" alt=""></a>
    </div>  
  </div>    
</div>

如果有人能提供帮助就太好了。

谢谢！

Answer 1

添加这个css你的自定义css

.all-portfolios div[class*=col-]
{
min-height:auto !important;
}

一行中的多个图像产生 1px 位置错误

multiple images in one line produce 1px position error

html

css

image

positioning