0

ページには、Left_Div と Right_Div という 2 つの div があります。右の div には、CSS の Top プロパティと Left プロパティを使用して複数の画像が配置されています。Left_Div は左パネルとして使用され、ボタンをクリックすると、Left_Div と Right_Div がアニメーション化されて右にスライドし、Left_Div が表示されます。FacebookのiPhoneアプリの左メニューと同じように。

 $("#Right_Div").animate({ marginLeft: "600px" }, 500);    
 $("#LeftDiv").animate({ width: "600px", opacity: 1 }, 500);

問題は、Left_Div と Right_Div がスライドすると、Left 属性と Right 属性を使用して配置された画像が移動せず、その結果、Left_Div が重なるということです。DIVで画像を移動する方法を教えてください。

非常に多くの画像があり、それらは動的にロードされるため、トップ/レフトのプロパティを再び休ませたくありません。

私は私の質問を説明したことを願っています:)

4

1 に答える 1

1

動的な動きが必要な場合は、正確な位置を指定できません。

画像が左から一定量のピクセルであると言うと、画像は常に正確にそこにあります。

たとえば、左または右に並べて配置するすべてのコンポーネントに割り当てるフローティング ロジックを使用する必要がありfloat: leftますfloat: right。

次に、要素を移動すると、その横に浮かぶように設定されている他のすべての要素が一緒に移動します。

デモ- アニメーション ロジックを使用したフローティングの例

デモでは、フローティングが適用されたときに要素が互いにどのように移動するかを確認できます。

上記のデモには、次の HTML があります。

<div id="Left_Div">My left div</div>
<div id="anotherLeftdiv">My other left div</div>
<div id="anotherRightdiv">My other right div</div>
<div id="Right_Div">my right div</div>​

CSS:

#Left_Div, #anotherLeftdiv{
    float: left;
}

#Right_Div, #anotherRightdiv{
 float: right;   
}

脚本：

$("#Left_Div").animate({ width: "150px", opacity: 1 }, 500);
$("#anotherRightdiv").animate({ marginRight: "100px" }, 500);

これが理にかなっていることを願っています。正確な現在の CSS と HTML がなければ、何を変更する必要があるかを正確に伝えるのは困難です。

編集
4 つの画像を右の div に追加し、固定配置の代わりにfloatandを使用して 4 つのコーナーに配置しました。clear

それらは、固定された位置を取得しない限り、div のアニメーションに沿って移動するだけです。

デモ- フローティング画像を使用したアニメーション

画像は div コンテナー内にfloat: leftありclear: rightます。たとえば、画像を左に移動し、その右に強制的に分割するように指示しています。したがって、float: left を使用するその他の画像は、強制的に下の行に配置されます。

float:right同じことがおよびにも当てはまりclear: rightます。これらの設定は、画像を強制的に右に保持し、強制的にその右側で中断し、他のfloat: rightものを下の行に強制します。

HTML の画像を参照してください。

<div id="Right_Div">
    <img class="left" src="http://www.fileden.com/files/2012/6/19/3318010/Eraser.png"/>
    <img class="right" src="http://www.fileden.com/files/2012/6/19/3318010/Script.png"/>
    <img class="left" src="http://www.fileden.com/files/2012/6/19/3318010/Ok.png"/>
    <img class="right" src="http://www.fileden.com/files/2012/6/19/3318010/Decrease%20time.png"/>
</div>​

画像を強制的にコーナーに配置するスタイル:

img.left{
    float: left;
    clear: right;
}

img.right{
    float: right;
    clear: right;
}

これが役立つことを願っています。あなたは今、遊ぶことがたくさんあるはずです。

特定の実装または解決できない CSS で問題が発生した場合は、この質問に回答して、問題が発生している特定のコードを投稿して新しい質問をする方が簡単です。

于 2012-08-18T08:05:01.593 に答える