Dato unAuto-layout a 2 colonne con CSS?
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing...
</div>
è possibile con CSS per generare automaticamente un layout 2 o 3 colonne, diciamo specificando l'altezza del contenitore? In caso contrario, quali sono le migliori pratiche in questo caso?
Grazie per il vostro aiuto.
Dato i commenti sulla mia risposta precedente, sembra che possa aver frainteso quello che stavi cercando.
Se si desidera che il testo di scorrere automaticamente da una colonna all'altra, allora le opzioni sono:
Personalmente, lo eviterei. In generale, il contenuto che scorre da una colonna all'altra è abbastanza negativo per lo schermo.
Il Floatutorial website ha buoni esempi di buone pratiche.
si rompono in modo esplicito la pagina, in cui la seconda colonna deve iniziare. Purtroppo :( – Michael
Tu certamente non poteva girare quanto sopra in un layout a 2 o 3 colonne, se si ha un contenitore e 3 div, la creazione di un layout a 3 colonne sarebbe semplice come questo:
<div class="container">
<div class="col1">Column1</div>
<div class="col2">Column2</div>
<div class="col3">Column3</div>
</div>
E CSS:
.container{overflow:hidden; padding:20px; border:1px solid #ccc;}
.col1, .col2, .col3{width:200px;float:left;clear:none;margin:0 10px 0 10px;}
Ciò creerebbe una disposizione molto basic 3 colonna con ogni colonna avente 10px di margine su ogni lato. Il contenitore div ha imbottitura 20px e un bordo sottile.
Spero che questo ti guidi nella giusta direzione.
cosa ti rende certo, che non c'è modo di farlo? Quando hai testi lunghi, automatizzare la rottura della pagina sarebbe bello, ma il tuo aiuto è molto apprezzato +1 voto – Michael
My Apolgies, ho frainteso la domanda quindi, intendevo che NON PUOI trasformare un singolo DIV in un layout a 3 colonne a meno che tu non abbia span o qualsiasi altro elemento di blocco all'interno che potresti manipolare via CSS. – SimonDowdles
E credo che potresti usare PHP (o altra lingua) per dividere il text up in blocchi (a lunghezze di parole definite dall'utente) quindi inserisci div, li stili come colonne e sostituisci il testo in essi, tutti sul lato server, ma ti assicuro che sarà banale – SimonDowdles
Per questo tipo di cosa che vorrei guardare con un sistema a griglia, come 960 o YUI
Entrambi includono modi per dividere le sottosezioni in colonne.
Ho sfogliato rapidamente entrambi, ma non ho ancora trovato il riferimento esplicito. : gli dai un testo come input (senza specificare dove dovrebbe interrompersi) e ti dà un layout a 2 colonne come output? – Michael
Grande suggerimento, utilizzo spesso il sistema di griglia 960 e, unito al reset CSS di Meyerweb (http://meyerweb.com/eric/tools/css/reset/), non puoi sbagliare, anche IE6 ti dà il benvenuto con le braccia spalancate! – SimonDowdles
@ Michael NO, devi ancora definire manualmente la colonna nel tuo markup come
che si estende su cinque porte, puoi scegliere un contenitore di 12 griglie, 18, 24 ecc. – SimonDowdlesSi può sempre prendere l'approccio jQuery, guardare a questo articolo: http://www.mainelydesign.com/blog/view/auto-columns-columnizer-my-new-favorite-jquery-plugin
Grande plug-in Il link al sito del plug-in effettivo è http: //welcome.totheinter. net/columnizer-jquery-plugin/ –
Il miglior plug-in di colonne di sempre. –
E in mente che CSS3 non è ancora ampiamente usato come vorremmo pensare che sia. La maggior parte del tuo mercato internet utilizza ancora browser obsoleti. Stai attento. – SimonDowdles
Quindi "mal supportato" – Quentin
fantastico, grazie David. ora se potessi solo sopravviverlo. Troppa poca reputazione :( – Michael