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を超えることがわかるので、ジャンプが発生します。

私が言っていることを証明するために、左上の高さを（200pxではなく）150pxに下げてみると、その上にカーソルを合わせると、下の高さが下にぶつかることがなくなります。

つまり、フロートされた要素は、含まれているdivに収まる必要があります。そうでなければ、彼らは飛び回り始めます

アップデート：

さらなる調査の結果、問題は、先に主張したようにボックスの高さがコンテナよりも大きくなったという事実ではないことがわかりました。むしろ、フローティング要素に異なる高さを使用しているためです。フローティング要素はドン高さが異なる場合はうまく機能しません。（ cssの211ページにあるマニュアルとまったく同じ詳細な例が表示されます。

私の主張を証明するために..何が起こっているのかをデバッグするために以下を実行してください：

  1. Chromeでウィンドウを右クリックして、inspect element
  2. divに移動し、.subsection1高さを210pxに変更します
    • その下のボックスが下がって、問題が再現されていることがわかります
  3. ここで、高さも.subsection2210pxに 変更します。
    • 下がったボックスが元の位置に戻ることがわかります。
  4. の高さを変更する.subsection3と.subsection4、何も変更されないことに気付くでしょう（つまり、ボックスが下がらないなど）
    • これは、さまざまな高さの要素がフローティングになると、予測できない、または定義されていない動作が発生するという点を証明しています。したがって、これは避けなければならない状況です。

最後の注意：

試行錯誤しながらcssを学ぶのは良いことですが、構造化された本（リンク先のような本）に従うことを強くお勧めします。cssは非常に直感的でなく、イライラする可能性があり、間違った結論に基づいて簡単に構築できます。試行錯誤の結果について。

于 2013-02-16T21:50:57.650 に答える