图像使用向左浮动在悬停时更改位置

Question

所以我正在创建一个向左浮动的图片库，一切都很好，但是当我到达第二行图片时，事情就乱套了。每当我将鼠标悬停在第一行的图像上时，第二行位置上的任何图像都会自行弄乱。

这是代码笔。（我最近的艺术作品看起来比 codepen 中的要好得多，但只要将鼠标悬停在图像上，您就会明白这一点）尝试将鼠标悬停在任何图像上，看看第二行图像是如何弄乱的。 http://codepen.io/anon/pen/ZpGrVA

<html>
<body style="background-color: rgb(242, 242, 242);">
<style>

.middlegallery{

   top:250px;
   position: absolute;
 }
 .mainpanel{
    left: 50%;
    right:50%;
    display:block;
    padding: 15px;
    /*top: 125px;*/
    font-size: 16px;
    background-color: #f5f5f5;
    border: 1px solid #d8d8d8;
    line-height: 1.5;
    border-radius: 5px 3px 0 0;
   position: relative;
    font-family: Helvetica, Arial, sans-serif;
}

.gallery-image{
 margin:5px;
 border: 1px solid #ccc;
 zoom: 1;
 float:left;
 cursor:pointer;
 position:relative;
 }
img:hover{
    border:1px solid #777;
}
img{

}
.middlewrapper{
    margin:0 auto;
    width:95%;
    padding-top: 125px;
}



</style>
<div class="middlewrapper">
<div class="col-sm-6">
<div class="mainpanel"><h5 style="font-family: Verdana, serif; text-align: left; position: relative; top: 3px;"><i class="fa fa-picture-o" aria-hidden="true"></i> Recent arts</h5></div>
  </div>
  <div class="middlegallery">
  <div class="gallery-image">
 <img src="http://placehold.it/240x220">
 </div>
 <div class="gallery-image">
    <img src="http://placehold.it/240x220">
 </div>
 <div class="gallery-image">
    <img src="http://placehold.it/240x220">
 </div>
 <div class="gallery-image">
    <img src="http://placehold.it/240x220">
 </div>
 <div class="gallery-image">
    <img src="http://placehold.it/240x220">
 </div>
 <div class="gallery-image">
    <img src="http://placehold.it/240x220">
 </div>
 <div class="gallery-image">
    <img src="http://placehold.it/240x220">
 </div>
 <div class="gallery-image">
    <img src="http://placehold.it/240x220">
 </div>
 </div>
 </div>

Answer 1

这里发生的事情是，当悬停时添加边框时，div 变大，并推动其他 divs。只需为图像添加边框即可。

img{
 border: 1px solid transparent;
}

Answer 2

因为在悬停时你添加了一个边框，这意味着你的元素会变大 2px，并且第 2 行会根据最长的元素自行定位。为此目的使用阴影

img:hover{
    box-shadow: 0 0 0 1px #777;
}

Answer 3

为 img 使用 transparent 边框并解决问题 - 您的 hover 边框导致了问题

    img:hover{
        border:1px solid #777;
    }
    img{
      border: 1px solid transparent;
    }

建议 - 将 display: block 或 vertical-align: top 添加到 img 以删除图像下方内联元素的空白特征。

让我知道您对此的反馈。谢谢！

* {
  box-sizing: border-box;
}
.middlegallery {
  top: 250px;
  position: absolute;
}
.mainpanel {
  left: 50%;
  right: 50%;
  display: block;
  padding: 15px;
  /*top: 125px;*/
  font-size: 16px;
  background-color: #f5f5f5;
  border: 1px solid #d8d8d8;
  line-height: 1.5;
  border-radius: 5px 3px 0 0;
  position: relative;
  font-family: Helvetica, Arial, sans-serif;
}
.gallery-image {
  margin: 5px;
  border: 1px solid #ccc;
  zoom: 1;
  float: left;
  cursor: pointer;
  position: relative;
}
img:hover {
  border: 1px solid #777;
}
img {
  border: 1px solid transparent;
  display: block;
}
.middlewrapper {
  margin: 0 auto;
  width: 95%;
  padding-top: 125px;
}

<html>

<body style="background-color: rgb(242, 242, 242);">
  <div class="middlewrapper">
    <div class="col-sm-6">
      <div class="mainpanel">
        <h5 style="font-family: Verdana, serif; text-align: left; position: relative; top: 3px;"><i class="fa fa-picture-o" aria-hidden="true"></i> Recent arts</h5>
      </div>
    </div>
    <div class="middlegallery">

      <div class="gallery-image">
        <img src="http://placehold.it/240x220">
      </div>
      <div class="gallery-image">
        <img src="http://placehold.it/240x220">
      </div>
      <div class="gallery-image">
        <img src="http://placehold.it/240x220">
      </div>
      <div class="gallery-image">
        <img src="http://placehold.it/240x220">
      </div>
      <div class="gallery-image">
        <img src="http://placehold.it/240x220">
      </div>
      <div class="gallery-image">
        <img src="http://placehold.it/240x220">
      </div>
      <div class="gallery-image">
        <img src="http://placehold.it/240x220">
      </div>
      <div class="gallery-image">
        <img src="http://placehold.it/240x220">
      </div>
    </div>
  </div>

</body>

</html>

图像使用向左浮动在悬停时更改位置

image changes position on hover using float left

html

css

image

css-position

css-float