jquery - Addclass 使 img 元素在位置方面不粘

Question

我在制作画廊图像时有这个图像列表。每当我单击图像时，都会通过 jquery 添加事件类，但图像位置也会发生变化。如何让它们变粘？如果单击，请参阅下面的示例 fiddle 图像，其他图像会掉到下一次或者它会创建一个空白空间

http://jsfiddle.net/of6hLc0t/

$(".img").click(function() {
    $(this).addClass("highlight");
});

Answer 1

您可以使用box-sizing .它会渲染元素内部的边框。但是，图像会缩小，这会导致某种“闪烁”。

相反，您可以添加一个填充，它在突出显示时被删除。如果您更喜欢，也可以尝试 margin。

$(".img").click(function() {
    // Changed to toggle to better show the example.
    $(this).toggleClass("highlight");
});

#imageconview {
  background-color: black;
  height: 430px;
  width: 350px;
  margin-top: 10px;
  margin-left: 50px;
}

#imagecon img {
  /* Padding by default */
  padding: 5px;  
}

#imagecon img.highlight {
  border: 5px solid green;
    /* Remove padding when highlighted, since it's replaced by border. */
  padding: 0px;  
}

#imagecon img {
  display: inline-block;
  float: left;
  margin-left: 3px;
  margin-top: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</div>



<div id="image_option">
	<div id="imagecon">

<div img="percon">
<img class="img" src="http://vignette1.wikia.nocookie.net/runescape2/images/d/df/Infernal_mage.png" alt="Smiley face" height="95" width="95">
</div>

<div img="percon">
<img class="img" src="http://vignette1.wikia.nocookie.net/runescape2/images/d/df/Infernal_mage.png" alt="Smiley face" height="95" width="95">
</div>

<div img="percon">
<img class="img" src="http://vignette1.wikia.nocookie.net/runescape2/images/d/df/Infernal_mage.png" alt="Smiley face" height="95" width="95">
</div>


<div img="percon">
<img class="img" src="C:\Users\edmtestuser\Desktop\Marlon Cristuta\images\photo_l_04.jpg" alt="Smiley face" height="95" width="95">
</div>

<div img="percon">
<img class="img" src="http://vignette1.wikia.nocookie.net/runescape2/images/d/df/Infernal_mage.png" alt="Smiley face" height="95" width="95">
</div>

<div img="percon">
<img class="img" src="http://vignette1.wikia.nocookie.net/runescape2/images/d/df/Infernal_mage.png" alt="Smiley face" height="95" width="95">
</div>

<div img="percon">
<img class="img" src="http://vignette1.wikia.nocookie.net/runescape2/images/d/df/Infernal_mage.png" alt="Smiley face" height="95" width="95">

<img class="img" src="http://vignette1.wikia.nocookie.net/runescape2/images/d/df/Infernal_mage.png" alt="Smiley face" height="95" width="95">


	</div>

</div>
</div>