0

Zurb の Foundation フレームワークのバージョン 4.2.1 を使用しており、ボックスをsmallデバイスの新しい行に条件付きでドロップしようとしています。次の図を参照してください。

コンピューターに 4 つのボックスを並べて表示した比較画像と、小型のスマートフォンに 4 つのボックスを 2 列に並べた比較画像。

これを機能させる方法を見つけましたが、ボックスの高さが均一でない場合、私の方法は機能しません。現在、私の半作業コードは次のようになっています。

しかし、いくつかのボックスのサイズを変更すると、このように壊れます。

最悪の場合、おそらく use を使用min-heightしmax-heightて、ボックスが同じサイズに保たれるようにすることはできますか?

4

1 に答える 1

1

非常に簡単な解決策があることがわかりました。次のように、通常のグリッドの代わりにブロック グリッドを使用します。

  <ul class="small-block-grid-2 large-block-grid-4">
    <li style="outline:solid black 1px;">Test</li>
    <li style="outline:solid black 1px;">Test</li>
    <li style="outline:solid black 1px;">Test</li>
    <li style="outline:solid black 1px;">Test</li>
  </ul>

うまくいけば、それは誰かを助けます。

于 2013-06-18T16:22:21.603 に答える