在写HTML时遇到多行图片设置div的hover属性显示边框。当鼠标移动到div时候会把下面的内容挤出去(如图)
可以看到下面的div被挤出去了
原因是因为 设置border时设置了1px边框,多出的这1px,与其它元素产生了挤压, 导致div偏移。
解决办法是先给div设置一个跟背景颜色相同的固定边框,比如我这个是白色背景,那么我就设置该div的border属性为白色
border: 1px solid #fff;
或者是给div设置一个透明的边框
border: 1px solid transparent;
然后再设置div的hover属性的边框
border: 1px solid #1d1d1d;
这样就不会挤掉了