Quotidiano-colonna in CSS

Question

E 'possibile avere un layout di giornale-colonna css organizzato in modo tale da poter aggiungere un numero qualsiasi di colonne e che verranno aggiunti continuamente alla destra delle colonne esistenti.

Il mio pensiero è così: vorrei solo aggiungere un nuovo div e una nuova colonna verrà aggiunta a destra e così via.

Se sì, come?

Here Ho trovato un layout di giornale a 4 colonne. Ma le altezze delle colonne non sono le stesse. Ho bisogno di un modo in modo che, non importa per quanto tempo il testo sia, saranno stipulati ad una certa altezza.

È possibile in CSS?

Answer 1

Penso che le tue esigenze siano meglio servite utilizzando un framework CSS esistente, piuttosto che codificarlo da zero, dal momento che è davvero un lavoro complicato e incredibilmente difficile da utilizzare su tutti i browser (poiché alcuni di essi non sono conformi agli standard

In ogni caso, per colonne di giornali, penso che ce ne sia uno là fuori che si adatta al conto, 960 Grid System. Viene fornito con 12 & 16 colonne "griglie", con le grondaie e le imbottiture tutte elaborate, e fintanto che il numero di colonne che si intende utilizzare è un fattore di 12 o 16, può gestirlo.

Answer 2

è possibile impostare l'altezza della colonna tramite CSS, ma l'aggiunta di una colonna automaticamente è un materiale di programmazione che utilizza altri linguaggi di programmazione Web.

Answer 3

Con puro CSS, è molto difficile assegnare più div alla stessa altezza, a meno che l'altezza non sia statica. Puoi usare i brutti hack, ma questo ti porterà solo lontano.

Per le colonne reali, utilizzare le tabelle, ecco a cosa servono. Le tabelle sono costrutti HTML validi, è solo che non dovresti usarli come lo solo strumento di layout. Ma quando i tavoli funzionano, usa le tabelle.

Answer 4

CSS3 fornisce un modo per trasformare qualsiasi contenuto di un nodo HTML in un numero qualsiasi di colonne. Ci sono proprietà per il controllo del numero di colonne e della loro larghezza, altezza relativa ("riempimento", o come il contenuto è diviso tra le colonne esistenti), grondaia tra colonne, "regola" (linea divisoria o confine), ecc.

Come punto di partenza, vedere la pagina di riferimento w3schools.com CSS3 Multiple Columns.

Tuttavia, come al solito, IE solo tra i browser più diffusi non supporta le proprietà CSS3 della colonna.

Una soluzione cross-browser è Columnizer jQuery Plugin.