a2-Spalten-Auto-Layout von CSS?
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing...
</div>
ist es möglich, mit CSS Gegeben durch die Angabe der Höhe des Behälters ein 2 oder 3-Spalten-Layout automatisch, sagen zu erzeugen? Wenn nicht, was sind die besten Praktiken in einem solchen Fall?
Danke für Ihre Hilfe.
Gegebene Kommentare zu meiner vorherigen Antwort, es scheint, dass ich missverstanden haben könnte, was Sie gesucht haben.
Wenn Sie Text möchten automatisch von einer Spalte zu einem anderen fließen, um dann Ihre Optionen sind:
Ich persönlich würde es vermeiden. Im Allgemeinen ist Inhalt, der von einer Spalte zur nächsten fließt, ziemlich medienunfreundlich.
Die Floatutorial website hat gute Beispiele für Best Practice.
sie explizit die Seite brechen, wo die zweite Spalte beginnen. Leider :( – Michael
Sie sicherlich die oben in ein 2 oder 3-Spalten-Layout nicht drehen konnten, aber wenn Sie einen Container und 3 divs haben, ein 3-Spalten-Layout zu schaffen, da dies wäre so einfach:
<div class="container">
<div class="col1">Column1</div>
<div class="col2">Column2</div>
<div class="col3">Column3</div>
</div>
Und die CSS:
.container{overflow:hidden; padding:20px; border:1px solid #ccc;}
.col1, .col2, .col3{width:200px;float:left;clear:none;margin:0 10px 0 10px;}
Dies wäre ein sehr einfaches 3-Spalten-Layout mit jeder Spalte mit 10px des Marge auf jeder Seite erstellen. Das Container-Div hat 20px Padding und einen subtilen Rand.
Hoffe das zeigt Ihnen in die richtige Richtung.
Was macht Sie sicher, dass es keine Möglichkeit gibt, dies zu tun? Wenn Sie lange Texte haben, dann wäre die Automatisierung der Brechen der Seite schön. Aber Ihre Hilfe wird sehr geschätzt +1 Upvote – Michael
Meine Apolgies, missverstanden die Frage dann, ich meinte, du kannst ein einzelnes DIV nicht in ein 3-Spalten-Layout umwandeln, es sei denn, du hättest Spannweiten oder andere Blockelemente, die du über CSS manipulieren könntest – SimonDowdles
Und ich denke du könntest PHP (oder eine andere Sprache) benutzen Text in Chunks (mit benutzerdefinierten Wortlängen) dann Einfügen Divs, style sie als Spalten und ersetzen Sie den Text in sie, alle auf der Serverseite Aber ich versichere Ihnen, es wird trivial sein – SimonDowdles
Für diese Art der Sache, die ich bei Verwendung eines Rastersystems wie 960 oder YUI
Beide sind Wege zu teilen Unterabschnitte in Spalten aussehen würde.
Ich habe schnell beide überflogen, aber habe die explizite Referenz noch nicht gefunden : Sie geben ihm einen Text als Eingabe (ohne anzugeben, wo es brechen sollte), und es gibt Ihnen ein 2-Spalten-Layout als Ausgabe? – Michael
Toller Vorschlag, ich benutze das 960 Grid-System oft, und gekoppelt mit dem CSS-Reset von Meyerweb (http://meyerweb.com/eric/tools/css/reset/) kann man nichts falsch machen, sogar IE6 begrüßt Sie mit offenen Armen! – SimonDowdles
@ Michael NEIN, Sie müssen immer noch manuell die Spalte in Ihrem Markup wie
definieren, die FIVE Rasterweiten umfasst, können Sie einen Container mit 12 Gittern, 18, 24 etc. – SimonDowdlesSie können jederzeit die jQuery-Ansatz nehmen, schauen Sie sich diesen Artikel: http://www.mainelydesign.com/blog/view/auto-columns-columnizer-my-new-favorite-jquery-plugin
Tolles Plugin Der Link zur eigentlichen Plugin-Seite ist http: //welcome.totheinter. net/columnizer-jquery-plugin/ –
Das beste Spalten-Plugin aller Zeiten. –
Und im Hinterkopf, dass CSS3 immer noch nicht so weit verbreitet ist, wie wir es gerne sehen würden. Der Großteil Ihres Internetmarktes verwendet immer noch veraltete Browser. Achtung. – SimonDowdles
Daher "schlecht unterstützt" – Quentin
genial, danke David. jetzt, wenn ich das nur aufbessern könnte. Zu wenig Reputation :( – Michael