css - 将鼠标悬停在一个 div 上会将另一个 div 推得太远

Question

我制作一个网站只是为了好玩，以提高我的技能，我制作了一些动画鼠标悬停 div。将鼠标悬停在它们上面时，所有这些都可以正常工作，但左上角的似乎会向下推右下方的那个。

这里有一些图片和我的代码:

http://imageshack.us/photo/my-images/39/werwe1.png/

http://imageshack.us/photo/my-images/18/werwe2.png/

还有我的代码:

*{
margin: 0px;
padding: 0px;
}

h1 {
font: bold 20px Prisoner SF
}

header, section, footer, aside, nav, article, hgroup{
   display: block;
}

#big_wrapper{
max-width: 1000px;
margin: 20px 0px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
margin-left: auto ;
margin-right: auto ;
}

body{
width: 100%;
margin: 0;
display:-webkit-box;
-webkit-box-pack: center;

} 

#main_div{
display: -webkit-box;
-webkit-box-orient: horizontal;
}

#main_section{
width: 600px;
height: 450px;
border: 4px solid black;
padding: 5px;
margin: 10px;
-webkit-transition: -webkit-transform 2s, border 2s, scale 2s,
}

#sidebar {
width: 500px;

}

.subsection1{
width: 200px;
height: 200px;
border: 4px solid black;
padding: 5px;
margin: 10px;
float: left;
-webkit-box-flex: 1;
-webkit-transition: -webkit-transform 2s, border 2s, scale 2s,
}

.subsection2{
width: 200px;
height: 200px;
border: 4px solid black;
padding: 5px;
margin: 10px;
float: left;
-webkit-box-flex: 1;
-webkit-transition: -webkit-transform 2s, border 2s, scale 2s,
}

.subsection3{
width: 200px;
height: 200px;
border: 4px solid black;
padding: 5px;
margin: 10px;
float: left;
-webkit-box-flex: 1;
-webkit-transition: -webkit-transform 2s, border 2s, scale 2s,
}

.subsection4{
width: 200px;
height: 200px;
border: 4px solid black;
padding: 5px;
margin: 10px;
float: left;
-webkit-box-flex: 1;
-webkit-transition: -webkit-transform 2s, border 2s, scale 2s,
}

#main_section:hover{
-webkit-transform: scale(1.05);
border: 5px solid yellow;
}

.subsection1:hover{
-webkit-transform: scale(1.05);
border: 5px solid yellow;
}

.subsection2:hover{
-webkit-transform: scale(1.05);
border: 5px solid yellow;
}

.subsection3:hover{
-webkit-transform: scale(1.05);
border: 5px solid yellow;
}

.subsection4:hover{
-webkit-transform: scale(1.05);
border: 5px solid yellow;
}

/* End Section Code */

/* Footer Code */

#footer{
text-align: center;
}

/* End Footer Code */

Answer 1

发生这种情况的原因是 b/c 当您将鼠标悬停在左上角时，您将其缩放 5%

-webkit-transform: scale(1.05);

因为你让所有这些盒子都 float 了，所以当你缩放左上角的盒子时，它会挤满底部盒子的宽度，所以它会跳到右下角的盒子下面。

用数学术语来说，这些框包含在 .sidebar 中，它没有设置高度，所以它只是采用相同的高度 .main_div = 450px。如果你计算一下，你会发现如果将左上角的框缩放 5% ((200+10)*1.05 = 210) 并将其添加到底部(那么你还必须添加填充和边距), 你会看到总数将超过 450px，因此会发生跳跃。

为了证明我的意思，您可以尝试将左上角的高度降低为 150 像素(而不是 200 像素)，您会发现将鼠标悬停在它上面时不会再将下方的高度撞到底部。

简而言之， float 元素必须适合包含的 div。如果他们不这样做，他们就会开始跳来跳去

更新:

经过进一步研究..事实证明，问题并不在于盒子的高度变得比我之前声称的容器大..而仅仅是因为您为 float 元素使用了不同的高度..如果 float 元素的高度不同，则 float 元素效果不佳。 (您将在 css the missing manual 的第 211 页看到一个与您的示例完全相同的详细示例。

为了证明我的观点.. 执行以下操作来调试正在发生的事情:

1. 在 chrome 上右键单击窗口并转到 inspect element
2. 转到 div .subsection1 并将其高度更改为 210px
   • 您会看到它下面的框下降，这会重现您的问题
3. 现在将 .subsection2 的高度也更改为 210px..
   • 你会看到掉下来的盒子回到原来的位置..
4. 如果您更改 .subsection3 和 .subsection4 的高度，您会发现没有任何变化(即没有框下降等)
   • 这证明了具有不同高度 float 的元素会导致不可预测或未定义行为..所以这是应该避免的情况

最后的说明:

像您一样通过反复试验来学习 css 很好。但我强烈建议您遵循结构化的书籍(如我链接到的那本书)。css 可能非常不直观且令人沮丧，但您可以轻松构建根据您的反复试验结果得出错误的结论。