1

私の CodePen : http://codepen.io/leongaban/pen/wzumq

こんにちは、今日は 6 列のレイアウト (1 行あたり 3 列) です。3 列目は非常に長く、サイドバーのようです。

設計に従って、列 4 と 5 は列 1 と 2 の下部に近づける必要があります (10px のパディングとしましょう)。

問題は、現在すべてが左に浮いているため、長い列 3 が列 1 と 2 の下部と列 4 と 5 の上部の間にスペースを作りすぎていることです。

小さなブラウザー ウィンドウでは、div のスタイルを変更するための適応コードがいくつかあるため、div の位置をそのまま維持したいと考えています。

これを行う簡単な方法はありますか?または、列 4 を 1 の下の別の列内に配置し、列 5 と 2 についても同じようにする必要がありますか? 次に、画面サイズが変更されたら、jQuery を使用して div を再配置しますか?

現在の問題: ここに画像の説明を入力


私が行こうとしていること: ここに画像の説明を入力

4

3 に答える 3

1

いくつかのオプションがあり、この記事ではそれらについて詳しく説明しています。

  1. すべてのブラウザーでこの機能を実行するJavascript/jQuery プラグイン ( jQuery masonry など)
  2. CSS 列を使用する CSS のみのオプション (記事で説明)。これは IE9 ではサポートされていないことを十分に認識しており、注意が必要です!

あなたが望むような石積みのレイアウトを達成するという点では、それはほとんどそれです.

于 2013-04-10T22:36:36.233 に答える
1

これを見てください:

http://cssdeck.com/labs/css-only-pinterest-style-columns-layout

お役に立てれば :)

于 2013-04-10T22:36:37.273 に答える