0

I've been working on a way to display panels on a homepage, the page is responsive and would start off with all the panels being 100% wide and stacking and then at a certain breakpoint the panels would split into two columns.

私の進行中の作業はここにありますhttp://codepen.io/charge-valtech/pen/aIEGf

これは、優先順位に従って左から右に流れるパネルでうまく機能します。ただし、問題は、このページが動的である必要があるため、どのパネルも「オフ」になる可能性があることです。したがって、3 番目のパネルを削除すると、float: left が指定されていても、float の動作方法のために 4 番目のパネルが右に移動しようとします。

クリアリングを使うと左に寄せてしまうのですが、3枚目のパネルがあったところに隙間ができてしまいます…

これがある程度理にかなっていることを願っており、他の人が問題にどのようにアプローチするかに興味がありました. 私は JavaScript が良い方法かもしれないと考えていますが、使用可能な空白があるかどうかを検出する方法を実際には知りません。

乾杯

4

2 に答える 2

1

石積みはこれには少しやり過ぎで、私が望んでいたほどきれいに機能しなかったので、これに対する私の解決策を共有したいと思いました.

私のcss left-widgetとright-widgetには2つのクラスがあり、これらはグリッドシステムを使用して幅とフロートを設定します。これにより、基本的に左にフロートし、右にフロートし、49.something％の幅が得られます。

デフォルトでは、すべてのウィジェットに left-widget クラスを与えてから、いくつかの jquery を使用してこれを行います。

$('.left-widget').each(function (index, value) {
                var widgetPosition = $(this).position().left;
                if (widgetPosition >= 30) {
                    $(this).removeClass('left-widget').addClass('right-widget');
                }
            });
            $('.right-widget').each(function (index, value) {
                var widgetPosition = $(this).position().left;
                if (widgetPosition <= 30) {
                    $(this).removeClass('right-widget').addClass('left-widget');
                }
            });

これで、ウィジェットが収まる場合は右側に貼り付けて、まさに私がやりたかったことを実行できます。

于 2013-02-07T10:48:34.023 に答える
-1

CSS メディア クエリを使用します。

@media (max-width: 1000px) {
   #box-js {display:none}
}

の CSS ルールは#box-js、画面が 1000px 未満の場合にのみ実行されます。

于 2013-01-24T12:17:26.983 に答える