colonne css come giornali e div con media

Question

Sto cercando di trovare una soluzione per poter codificare qualcosa come l'immagine allegata tramite css, js o php.

Voglio avere tre colonne per i miei articoli. E in cima alle ultime 2 colonne un div extra per i media dell'articolo.

Collegamenti con tutorial o trucchi di posizione css per questo sono impagabili!

Grazie in anticipo ...

immagine link: http://my.greview.gr/css_newspaper.png

---

suo ok per questa soluzione la parte di columnization, e in questo caso mi preoccupo per il browser-cross, ma il problema ecco come posso configurare la posizione del media div, sopra a 2 ultime colonne, e prevenire la sovrapposizione del testo dell'articolo principale!

Answer 1

Se si utilizza i moderni browser, è possibile utilizzare i column bit da css3

div#multicolumn1 { 
    -moz-column-count: 3; 
    -moz-column-gap: 20px; 
    -webkit-column-count: 3; 
    -webkit-column-gap: 20px; 
    column-count: 3; 
    column-gap: 20px; 
} 

Read more here: http://www.quirksmode.org/css/multicolumn.html

---

Un modo per farlo funzionare con l'immagine su due colonne è quello di fare quanto segue:

1. impostare un wrapper div, dargli un position:relative

2. impostare il vostro multicolumn div, dargli un fixed larghezza

3. aggiungere due spacer spans, uno per ogni colonna che si desidera avere la durata dell'immagine sopra. Impostali su display: block. NB sarà necessario armeggiare con la loro posizione nel contenuto per rendere lo spazio appropriato in alto.

4. utilizzare position:absolute per impostare l'immagine nel suo punto.

Normalmente si usa column-span e scegliere un numero ... ma non è supportato in qualsiasi browser, che io sappia. (Supportano solo all o none).

CSS

div#wrapper{ 
    width:500px; 
    border:1px solid red; 
    padding:1em; 
    position:relative; 
} 

div#multicolumn1 { 
    -moz-column-count: 3; 
    -moz-column-gap: 20px; 
    -moz-column-width:100px; 
    -webkit-column-count: 3; 
    -webkit-column-gap: 20px; 
    -webkit-column-width:100px; 
    column-count: 3; 
    column-gap: 20px; 
    column-width:100px; 
} 

div#img{ 
    height:70px; 
    width:350px; 
    border:1px solid green; 
    position:absolute; 
    right:10px; 
} 

span.bg1{ 
    width:100%; 
    height:100px; 
    display:block; 
} 

Esempio:http://jsfiddle.net/jasongennaro/HgmKg/2/

Answer 2

La risposta classica alla tua domanda è Colonne CSS. Questo è già stato discusso in un'altra risposta. Ti dà la possibilità di dividere un blocco in colonne.

Nell'altra risposta hai affermato che potrebbe non funzionare per te in quanto desideri posizionare elementi grafici e far scorrere il testo attorno ad essi.

Questo potrebbe essere possibile con le colonne CSS - Devo confessare che non l'ho provato, ma è possibile far scorrere il testo attorno alla grafica normalmente, quindi non vedo perché non dovrebbe essere possibile con Columns, come dovrebbe funzionare come qualsiasi altro blocco a parte il layout del testo al suo interno.

Tuttavia, se questo non è abbastanza buono per voi, quindi CSS offre un'altra soluzione denominata regioni CSS. Questo è un meccanismo che ti permette di specificare che il testo può fluire da un elemento all'altro. Puoi concatenare i blocchi e posizionarli come preferisci. Questo ti dà la completa libertà di deporre la tua pagina come preferisci.

È possibile trovare maggiori informazioni qui: http://msdn.microsoft.com/en-us/ie/hh272902#_CSSConnected

E 'fondamentalmente un sistema di layout di pagina completamente gratuito, e dovrebbe essere esattamente quello che stai cercando.

Questa è la buona notizia.

La cattiva notizia è che le regioni CSS hanno praticamente zero supporto browser in questo momento. Vedi CanIUse per informazioni complete sul supporto del browser. Come puoi vedere dalle tabelle su quel link, è disponibile in alcuni browser, ma anche una volta implementato sarà abbastanza lontano dall'avere abbastanza supporto per gli utenti che ne valga la pena.

Che è un peccato perché è esattamente quello che stai cercando.