javascript - <div>标签在选择其他标签时向上移动

我有一个jsfiddle：
http://jsfiddle.net/aritro33/y6wBy/

当您点击该jsfiddle上的compose按钮时，一则帖子会掉落下来，上面显示出各种颜色。请注意，当您单击中间的颜色或与此相关的任何颜色时，该颜色左侧的所有颜色会稍微向上移动以产生怪异的效果。如何防止选中的div左侧的所有颜色向上移动并实际上将它们保持在原位。

谢谢！

HTML：

<div id="red" class = "color"></div>
<div id="orange" class = "color"></div>
<div id="yellow" class = "color"></div>
<div id="green" class = "color"></div>
<div id="turquoise" class = "color"></div>
<div id="blue" class = "color"></div>
<div id="purple" class = "color"></div>
<div id="gray" class = "color"></div>

CSS：

#red {

     background-color: #2ac0a3;
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
     position: relative;
     bottom: 220px;
     left: 365px;
 }
 #orange {
     background-color: #25ac92;
     position:relative;
     bottom:236px;
     left: 405px;
 }
 #yellow {
     position: relative;
     bottom: 252px;
     left: 445px;
     background-color:#219982;
 }
 #green {
     position: relative;
     left: 485px;
     bottom: 268px;
     background-color: #1d8672;
 }
 #turquoise {
     position: relative;
     left: 525px;
     bottom: 284px;
     background-color: #197361;
 }
 #blue {
     position: relative;
     left: 565px;
     bottom: 300px;
     background-color: #156051;
 }
 #purple {
     position: relative;
     left: 605px;
     bottom: 316px;
     background-color: #104c41;
 }
 #gray {
     height: 16px;
     width: 40px;
     position: relative;
     left: 645px;
     bottom: 332px;
     background-color: #0c3930;
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px;
 }

.active{
     height: 18px;
    width: 45px;
    z-index: 1;
    border: 1px solid white;
}

JS：

$('.color').click(function(){ $('.active').removeClass('active'); $(this).addClass('active'); });

最佳答案

您的#active属性更改颜色的大小：

.active{
    height: 18px;
    width: 45px;
    z-index: 1;
    border: 1px solid white;
}

如果将其更改为此：

.active{
    height: 14px;
    width: 45px;
    z-index: 1;
    border: 1px solid white;
}

效果似乎消失了。

关于javascript - <div>标签在选择其他标签时向上移动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21166389/