Div граница по наведению выталкивает плавали содержание

Question

У меня есть 4 float: left 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; 
} 

EDIT: В качестве альтернативы, если невидимая граница не будет работать (градиентный фон и т.д.) вы можете добавить 1px отступы, когда не колебались и сделать его 0px заполнения при наведении.

Например:

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