Addクラスは、位置に関して粘着性ではありません。

Question

私はギャラリー画像を作っているので、私はこの画像のリストを持っています。画像をクリックするたびにjquery経由でアクティブなクラスが追加されますが、画像の位置も変更されます。それらを粘着性にする方法？

.highlight{ 
    border: 5px solid green;  
    box-sizing: border-box; 
} 

を：あなたのハイライトクラスにボックスのサイズ変更を追加

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

Answer 1

あなたはbox-sizingを使用することができます。代わりにアイテムの内側にボーダーがレンダリングされます。しかし、画像が縮小され、一種の「点滅」が発生します。

代わりに、パディングを追加することができます。パディングは強調表示されているときに削除されます。もしあなたがより好きなら、マージンを試すこともできます。

$(".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"> 
 
\t <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"> 
 

 

 
\t </div> 
 

 
</div> 
 
</div>

Answer 2

に

http://jsfiddle.net/of6hLc0t/

あなたが 画像をクリックすると、他の画像は、次回に落ちるか、空のスペースを作成し、以下のサンプルフィドルで見ます

http://jsfiddle.net/of6hLc0t/1/

Answer 3

0これを試してみてください

div > img{ border: 5px solid #f3f5f6; } 

代わりaddClassの

利用toggleClass（）（）

Answer 4

Updated Fiddle http://jsfiddle.net/of6hLc0t/2/

#imagecon img.img.highlight{ 
border: 5px solid green;     
} 


#imagecon img { 
display: inline-block; 
float: left; 
margin-left: 3px; 
margin-top: 2px; 
border:5px solid white;//Add this 

}