css - 悬停上的 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;
}