悬停的Div边界推动浮动的内容

Question

我有4个float: left像这样的div容器......

我想在div悬停时显示边框.但是,当我将鼠标悬停在第一个或第二个div上时,它将底部div推向左侧......

我尝试在div中添加margin和padding,但似乎没有任何效果.

.div
{
  width: 33%;
}

.div:hover
{
  boder: solid 1px #EEE;
}

Answer 1

在初始状态下使用背景颜色或透明边框,框的大小不会改变.

.div {
  width: 32%; // (33% + 1px border) * 3 = likely more than the width of the container
  border: solid 1px transparent;
}

.div:hover {
  boder: solid 1px #EEE;
}