columnas css como periódico y div con medios

Question

Estoy tratando de encontrar una solución para poder codificar algo como la imagen adjunta a través de css, js o php.

Quiero tener tres columnas para mis artículos. Y encima de las 2 últimas columnas, un div adicional para los medios del artículo.

Los enlaces con tutoriales o trucos de posición CSS para esto no tienen precio!

Gracias de antemano ...

vínculo de la imagen: http://my.greview.gr/css_newspaper.png

---

Está bien para esta solución por parte de columnization, y en este caso no cuido para el navegador cruzado, pero el problema ¡Aquí es cómo puedo configurar la posición de los medios div, sobre las 2 últimas columnas, y evitar la superposición de texto del artículo principal!

Answer 1

Si está utilizando los navegadores modernos, podría utilizar los column trozos de 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; 
} 

Lee más aquí: http://www.quirksmode.org/css/multicolumn.html

---

Una manera de hacer que funcione con la imagen a través de dos columnas es hacer lo siguiente:

1. establecer a wrapper div, darle una position:relative

2. configurar su multicolumn div, darle una anchura fixed

3. añadir dos espaciador spans, uno para cada columna que desea tener el lapso imagen sobre. Configúrelos en display: block. NB tendrá que jugar con su posición en el contenido para hacer el espacio apropiado en la parte superior.

4. usa position:absolute para establecer la imagen en su lugar.

Normalmente se usaría column-span y recoger una serie ... pero eso no es soportado en cualquier navegador que yo sepa. (Solo admiten 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; 
} 

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

Answer 2

La respuesta clásica a su pregunta es Columnas CSS. Esto ya ha sido discutido en otra respuesta. Te da la capacidad de dividir un bloque en columnas.

En la otra respuesta, ha indicado que podría no funcionar para usted, ya que desea colocar elementos gráficos y hacer que el texto fluya a su alrededor.

Esto podría ser posible con Columnas CSS - Tengo que confesar que no lo he probado, pero es posible hacer que el texto fluya alrededor de los gráficos normalmente, así que no veo por qué no debería ser posible con Columns, ya que debería funcionar como cualquier otro bloque aparte del diseño del texto que contiene.

Sin embargo, si esto no es lo suficientemente bueno para usted, CSS ofrece otra solución llamada regiones CSS. Este es un mecanismo que le permite especificar que el texto puede fluir de un elemento a otro. Puede encadenar sus bloques y colocarlos como desee. Esto le da total libertad para presentar su página como desee.

Usted puede encontrar más información sobre él aquí: http://msdn.microsoft.com/en-us/ie/hh272902#_CSSConnected

Se trata básicamente de un sistema de diseño de página completamente libre, y debe ser exactamente lo que estás buscando.

Esa es la buena noticia.

La mala noticia es que las regiones CSS prácticamente no tienen soporte para el navegador en este momento. Consulte CanIUse para obtener información completa sobre el soporte de navegador. Como puede ver en las tablas de ese enlace, viene en algunos navegadores, pero incluso una vez que se implemente estará lejos de contar con la asistencia suficiente del usuario para que valga la pena usarlo.

Lo cual es una pena porque es exactamente lo que estás buscando.