1

ズーブファンデーションを使用しています。

水平に配置されている場合、2 つのグリッドを同じ高さに設定する方法はありますか。そして、それらが垂直に配置されている場合は、異なる高さを設定したい.

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

たとえば、「左」のグリッドの高さが 400px で、「右」のグリッドの高さが 300px の場合、右のグリッドを水平である限り 400px に設定します。しかし、スマートフォンのような小さなディスプレイでは、縦に並べられます。この場合、「右」のグリッドの元の高さ (300px) を設定します。

どうすればいいですか？

4

2 に答える 2

4

これを行う最善の方法は、単純な JS の救済策を使用することです。Foundation を何年も使用しており、これが私のフェイルセーフ コードです。

<script>
$(window).load(function() {
    //call the equalize height function
    equalHeight($("div.small-item"));

    //equalize function
    function equalHeight(group) {
        tallest = 0;
        group.each(function() {
            thisHeight = $(this).height();
            if(thisHeight > tallest) {
                tallest = thisHeight;
            }
        });
        group.height(tallest);
    }
});
</script>

これにより、"small-item" のすべての div クラスに同じ高さの列が与えられます。最も高い列の高さに基づく:

于 2013-11-16T12:00:34.923 に答える
0

メディア クエリは、ブレークポイント 768px の間で実行するアクションを決定するために機能します。両方のコンテンツに関係なく、またはウィンドウのサイズを変更しても、2 つの水平方向の div を同じ高さに保ちたい場合 (どちらの側のコンテンツも不均等に大​​きくなる可能性があります)、おそらく JavaScript を使用する必要があります。

私は自分のサイトで使用しました。これは非常に簡単で、おそらく完全に安全ではありませんが、私の解決策は次のとおりです。

$(window).resize(function () {
  var leftblock = $('#left');
  var rightblock = $('#right');
  leftblock.height('auto');
  rightblock.height('auto');
  if ($(window).width() > 767)
  {
    var maxHeight = Math.max(leftblock.height(), rightblock.height());
    leftblock.height(maxHeight);
    rightblock.height(maxHeight);
  }
});

ウィンドウのサイズが変更されるかロードされるたびに高さを自動にリセットし、ウィンドウの幅が 768 ブレークポイントを超えている場合は、両方の高さを 2 つのうち大きい方に設定します。

于 2013-08-17T13:39:41.787 に答える