2

タイル要素のコレクションを背景として持つWebページがあります。この上に配置された、オーバーレイとして機能する別のタイルのセット（2倍の大きさ）があります。これらの大きなタイルのそれぞれには、小さな背景タイルの1つのサイズに等しい「マージン右」があります。この例を見ることができます@http ://jsfiddle.net/dhx2r/2/*updated

一見、これは正しく表示されます。問題は、大きなタイルごとにこの右マージンがあるため、ウィンドウを拡大しても、幅が3つの小さなタイルより大きくない限り、タイルが上にスライドしてギャップを埋めることができないことを意味します。（このように：http：//img444.imageshack.us/img444/1412/70953496.png）

理想的には、window.resizeイベントにアタッチし、3つの小さなタイルのギャップが利用可能になったときに「margin-right」を「0」に設定します。jsfiddleのjsパネルのコードでこれを実行しようとしましたが、正しい結果が得られませんでした。私が使用しているコードは「window.resize」イベントに依存しているため、jsfiddleは実際に何が起こるかを示していませんが、少なくとも私が使用しているコードを示しています。

私は今日この問題に約7時間苦労しているので、私の心は少し揚げられています！この最初の問題を修正した後の私の意図は、この効果を与えるために、奇数行を何とかずらして、小さなタイルの幅の「マージン左」になるようにすることでした：http: //img507.imageshack.us/img507/3600 /57663338.png

私は次を使用して偶数/奇数行を計算することができました（小さなタイルが150px、大きなタイルが300pxであると仮定）：

if ((pos != 0) && (pos % 600 != 0)) {
    // The row is even, stagger the tiles.
}
else {
    // The row is odd, do nothing.
}

..しかし、私はこの最初の問題を乗り越えてロジックに取り組むことはありませんでした。

とにかく、私がこれをどのように機能させることができるかについて誰かが解決策を持っているなら、私はそれを大いに感謝します！壁に頭をぶつけて一日を無駄にしたような気がします。

ありがとう ：-）

4

2 に答える 2

2

解決策の始まりはありますが、色が正しく設定されていない場合があります。私はそれを解決するために探しています。

フィドル1

最後に、すべての問題がここで解決されます。

ありがとう、解決策を見つけるのは面白かったです。この解決策があなたにとって良いことを願っています。

于 2012-08-14T17:40:13.320 に答える
1

たぶん、マージンを捨てて、大きなものと同じように崩壊するいくつかの隠されたフィラータイルを使用する必要がありますか？

フィドル

さて、パート2。これは微調整が必​​要なソリューションであり、テストのために行もオレンジ色にしました。正確な数字をいじる時間はありませんが、これで非常に近くなるはずです。

フィドル2

于 2012-08-09T15:59:02.950 に答える