Question

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

当你点击这个jsfiddle上的撰写按钮时，一个帖子会下降，露出上面的各种颜色。请注意，当您单击中间的颜色或任何颜色时，该颜色左侧的所有颜色都会略微向上移动，从而产生奇怪的效果。怎样才能防止所选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'); });

Answer 1

您的#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;
}

效果似乎消失了。

Answer 2

看起来#gray的CSS有一些其他属性，如果你模仿其他属性，那么轻微的动作似乎就会消失：

 #gray {
 position: relative;
 left: 645px;
 bottom: 332px;
 background-color: #0c3930;}

希望这有帮助！

Answer 3

对我来说，你可能会重写你的CSS。将每个元素放置到位置会让你在最后遇到更多问题。

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

3 个答案: