0

下の図に示すように、順序を変更せずにDIV(幅と高さが定義されている)の単語を抑制するにはどうすればよいですか?

ここに画像の説明を入力してください

DIVでそれを行う運がない場合、これを整理するにはどうすればよいですか?

4

2 に答える 2

2

column-countここにフィドルを使用できます:http: //jsfiddle.net/X3XtK/1/

今あなたのコメントを見ました。各列を最大6アイテムに制限する必要があり、アイテムの数が不明な場合column-countは注意が必要です。それらをマークアップにグループ化する必要があると思います(たとえば、6つの各グループを独自divに配置してからフローティングにします)。

于 2012-04-05T07:57:56.063 に答える
1

小さなjQueryスクリプトでそれを行うことができます。このフィドルを参照してください:http://jsfiddle.net/GlauberRocha/ZwY7q/

ではなくリストとして作成しましたdiv(ただし、これは簡単に変更できます)。私の例では、アイテムは最初は順序付けられていないリスト(ul)にあります。それらは再帰的に6x6で取り出され、olフロートされる新しい順序付きリスト()要素に入れられます。

元のマークアップで要素をグループ化できれば問題ありませんが(@powerbuoyによって提案されているように)、JavaScriptでそれを行うことには2つの利点があります。

  • HTMLマークアップをシンプルで「セマンティック」に保ち、
  • 行数は動的に設定できます(私の例では、関数に引数として渡されます)
于 2012-04-05T08:53:42.780 に答える