0

私は JS が初めてで、Zurb Foundation 4 フレームワークで応答性の高いカスタム グリッド レイアウトを作成するためのソリューションを見つけようとしています。

カスタム レイアウト

大きなブロックには一定のサイズがあり、小さなブロックはその周りを埋めますが、このタイプのパターンでは、さらに div が追加されます。

しかし、モバイル レイアウトでは、それらはすべて同じサイズとスタックになります。

私は mason.js と jQuery masonry をいじっていますが、運がありませんでした。これらのいずれかが私の問題に対して機能しますか、それとも他に調べるべきことがありますか?

4

2 に答える 2

1

ネストされた行だけで、「small-」、「large-」、push、pull などの他のグリッド クラスを使用して、そのようなレイアウトを行うことができます。

あなたが JavaScript ソリューションについて言及したことは知っていますが、粗雑な Html/CSS オプションを提供すると思いました。

<div class="row">
    <div class="large-2 columns">
        <div class="row">
            <div class="large-12 columns"></div>
        </div>
        <div class="row">
            <div class="large-12 columns"></div>
        </div>
    </div>
    <div class="large-5 columns"></div>
    <div class="large-5 columns"></div>
</div>

<div class="row">
    <div class="large-4 columns"></div>
    <div class="large-8 columns">
        <div class="row">
            <div class="large-4 columns"></div>
            <div class="large-4 columns"></div>
            <div class="large-4 columns"></div>
        </div>
        <div class="row">
            <div class="large-4 columns"></div>
            <div class="large-4 columns"></div>
            <div class="large-4 columns"></div>
        </div>
    </div>
</div>

これは非常に大まかなjsFiddleの例です

明らかに、列数をいじったり、マージンをカスタマイズしたりすることは適切です。結果ウィンドウが私にいたずらをしていたので、メディアクエリを削除しました。

これがいずれかの方法で役立つことを願っています。

于 2013-08-18T01:46:19.513 に答える
0

これを行うプラグインを作成しました。www.masonjs.comをチェックしてください。まさにあなたが探しているものを実行するはずです! 乾杯！

于 2013-08-15T21:06:42.890 に答える