Diseño de mampostería SÓLO con CSS

Question

Como puede ver en la imagen, cada caja tiene una altura diferente y hay algunas cajas con doble ancho.

¿Es posible crear un diseño de estilo de mampostería solamente con CSS?

Answer 1

Con el apoyo CSS3 usted puede hacer esto:

http://jsfiddle.net/huAxS/2/

.container { 
    -moz-column-count: 2; 
    -moz-column-gap: 10px; 
    -webkit-column-count: 2; 
    -webkit-column-gap: 10px; 
    column-count: 2; 
    column-gap: 10px; 
    width: 360px; 
} 

.container div { 
    display: inline-block; 
    width: 100%; 
    background-color: red; 
}​ 

Sin apoyo CSS3, tiene que recurrir a js por desgracia.

Answer 2

Estoy trabajando en un sitio en este momento con el mismo tipo de diseño, dos columnas con el cuadro doble ancho ocasional. Lo que hago es separar el ancho doble del resto del contenido. Por ejemplo:

<div class="two-columns"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 
<div class="double-wide"> 
</div> 
<div class="two-columns"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 

continuación, puede aplicar la solución a la columna CSS3 sólo la clase two-columns. Si necesita admitir IE9, lamentablemente deberá agregar un JavaScript fallback.