6

私はこれを前に見たことがないか、または私がそれがどのように行われたかに気づいていなかった場合。

display:inlineのように要素を下にスタックするのではなく、HTMLとCSSを使用して要素を上にスタックする方法があるかどうか疑問に思いました。積み重ねられた要素がラインの最後に到達したときに、重力に逆らって行きたいと思っています。

理想的には、CSSとHTMLだけを使用したいと思います。Javascript、必要に応じて、そうかもしれないと思います。

ここに画像の説明を入力してください-アップアップなど->ここに画像の説明を入力してください

4

3 に答える 3

5

コンテナと子供たちをひっくり返すと、子供たちが反対の重力を進んでいるように見えます。

サンプルは次のとおりです。

http://jsfiddle.net/WSBLv/

そこに大きな箱と小さな箱をたくさん入れました。それらはすべてfloat: left、要素を左から右、上から下に移動させるために使用しています。

次に、CSS変換を使用して、大きなボックスとすべての小さなブロックの両方を反転します。

-moz-transform: scale(-1);
-webkit-transform: scale(-1);
-o-transform: scale(-1);
-ms-transform: scale(-1);
transform: scale(-1);

Internet Explorerの場合、フィルターを使用できます。

filter: FlipH FlipV;

次に、次のようになります。

http://jsfiddle.net/NFSMm/

于 2011-03-08T16:41:30.800 に答える
1

jQuery の insertBefore() 関数を使用して、他の要素の「上に」要素を追加できます。

http://api.jquery.com/insertBefore/

于 2011-03-08T14:19:53.020 に答える
0

非常に洗練されたソリューションではありませんが、スペーサー<div>または画像を使用して最初のスペースを埋め、すべてを右に押し出すことができます。要素を追加または削除すると、div を拡大または縮小して位置合わせを維持します。

于 2011-03-08T14:43:50.543 に答える