2012-04-05 17 views
0

Wie kann ich Wörter in einem DIV (mit einer definierten Breite und Höhe) auf eine Weise unterdrücken, die in der Abbildung unten dargestellt ist, ohne mit der Reihenfolge zu verkehren?So unterdrücken Sie Wörter in einem DIV

enter image description here

Wenn kein Glück zu tun, dass in einem DIV ist, was soll ich tun dies zu klären?

+1

ich Ihre Frage nicht verstehen. In Ihrem Beispiel wird kein Wort unterdrückt, es gibt nur ein anderes Layout. Was genau versuchst du zu tun? –

+0

Ich versuche max. 6 Elemente für jede Zeile. Die Liste könnte dynamisch größer werden. –

Antwort

2

Sie column-count hier eine Geige verwenden: http://jsfiddle.net/X3XtK/1/

Ihren Kommentar Saw jetzt. Wenn Sie jede Spalte auf maximal 6 Elemente beschränken müssen und es eine unbekannte Anzahl von Elementen gibt, dann wird column-count knifflig sein. Ich denke, Sie müssen sie im Markup gruppieren (jede Gruppe von 6 in ihre eigene div setzen und dann zum Beispiel schweben).

+0

Das hat den Trick gemacht, danke. –

1

Sie können es mit einem kleinen jQuery-Skript tun. Siehe diese Geige: http://jsfiddle.net/GlauberRocha/ZwY7q/

Ich habe es als eine Liste anstatt als div gemacht (aber Sie können dies leicht ändern). In meinem Beispiel befinden sich die Artikel zunächst in einer ungeordneten Liste (ul). Sie werden rekursiv 6 mal 6 herausgenommen und in ein neues geordnetes Listenelement (ol) eingefügt, das floated ist.

Es ist in Ordnung, wenn Sie können Ihre Elemente in der ursprünglichen Markup-Gruppe (wie von @powerbuoy vorgeschlagen), aber es mit JavaScript hat zwei Vorteile zu tun:

  • Sie behalten Ihre HTML-Markup einfach und „semantische“,
  • die Anzahl der Zeilen dynamisch eingestellt werden kann (in meinem Beispiel ist es als Argument an die Funktion übergeben)
Verwandte Themen