当其中一个图像变大时，如何保持其他图像不动？

Question

HTML

<img id="btnLeft" src="img/btnLeft.png"/>
<img id="logo01" src="img/logo01.png"/>

CSS

#btnLeft{heigth:64px;}
#btnLeft:hover{height:74px;}

鼠标悬停btnLeft将#logo01向下推10px 我希望#logo01留在原地。

Answer 1

为您的图片元素创建一个单独的div，根据您的偏好向左或向右浮动，然后在包含vertical-align: top上使用div。以下是一个示例：http://jsfiddle.net/94zVg/。

出现此问题的原因是您必须并排成像元素，这些元素将与其包含块的底部对齐。当放大一个图像时，它会扩展包含块，而另一个元素下降以粘附到它的底部。垂直浮动和对齐可以解决此问题。

Answer 2

为第一张图片添加宽度，否则其宽度将按比例扩展并向下推动相邻图像。

#btnLeft{height:64px;width:100px;}
#btnLeft:hover{height:74px;}

以下是具有明确宽度的演示：http://jsfiddle.net/XRKK4/

以下是没有明确宽度的演示：http://jsfiddle.net/XRKK4/1/