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

Question

我有4个float: left div容器，如此......

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

我尝试在div中添加边距和填充，但似乎没有任何效果。

.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;
}

Answer 2

一种解决方案是始终使用边框，但在不悬停时使其与背景颜色相同。

例如：

.div
{
  width: 33%;
  border: solid 1px #FFF;
}
.div:hover
{
  border: solid 1px #EEE;
}

编辑：或者如果一个不可见的边框不起作用（渐变背景等），你可以在不悬停时添加1px填充，并在悬停时使其成为0px填充。

例如：

.div
{
  width: 33%;
  padding: 1px;
}
.div:hover
{
  border: solid 1px #EEE;
  padding: 0;
}