1

我制作一个网站只是为了提高我的技能，我制作了一些动画鼠标悬停 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 */
4

1 回答 1

2

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

-webkit-transform: scale(1.05);

并且由于所有这些框都是浮动的，因此当您缩放左上角的框时，它会挤满底部框的宽度，因此它会跳到右下角的框下方。

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

为了证明我在说什么，您可以尝试将左上角的高度降低为 150 像素（而不是 200 像素），您会发现将鼠标悬停在其上方不会再将下方的高度撞到底部。

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

更新：

经过进一步研究..事实证明，问题不在于盒子的高度比我之前声称的容器大..而仅仅是因为您为浮动元素使用了不同的高度..浮动元素不如果它们的高度不同，就不能很好地工作。（您将在css the missing manual的第 211 页看到一个与您的完全相同的详细示例。

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

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

最后说明：

像你正在做的那样通过反复试验来学习 css 是好的。但我强烈建议你遵循一本结构化的书（就像我链接到的那本书）。css 可能非常不直观和令人沮丧，你很容易基于错误的结论得出结论根据您的试错结果。

于 2013-02-16T21:50:57.650 回答