图像使用左浮动改变悬停位置答案

【问题标题】：image changes position on hover using float left图像使用左浮动改变悬停位置
【发布时间】：2017-09-04 01:31:06
【问题描述】：

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

这里是代码笔。（我最近的作品看起来比 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>

【问题讨论】：

您正在使用引导程序，为什么不真正利用使用它的主要原因之一，也就是布局网格，而不是做这个浮动的东西？
@ChrisW。能举个例子吗？
当然，谷歌“引导网格教程”或“引导图像库”等。有很多例子 amigo。 :)
@ChrisW。当然我会检查一下谢谢你告诉我:)

标签： html css image css-float css-position

【解决方案1】：

为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>

【讨论】：

非常感谢，这是一个很好的答案。它与 display:block 配合得非常好

【解决方案2】：

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

img{
 border: 1px solid transparent;
}

【讨论】：

我的错我应该注意到：/.

【解决方案3】：

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

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

【讨论】：