css - ホバー時の div ボーダーがフローティング コンテンツをプッシュする

Question

私は4つfloat: leftのdivコンテナを持っています...

divにカーソルを合わせたときに境界線を表示したい。ただし、最初または2番目のdivにカーソルを合わせると、下のdivが左に押し出されます...

div にマージンとパディングを追加しようとしましたが、何も機能していないようです。

.div
{
  width: 33%;
}

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

Answer 1

解決策の 1 つは、常に境界線を表示し、ホバーしていないときは背景と同じ色にすることです。

例えば：

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