cómo apilar divs de arriba a abajo en CSS

Tengo una lista que dice así:cómo apilar divs de arriba a abajo en CSS

<div class="item">1</div> 
<div class="item">2</div> 
<div class="item">3</div> 
<div class="item">4</div> 
<div class="item">5</div>

usando CSS float a la izquierda, se ve así en html:

1 2 
3 4 
5

¿Es posible diseñar mi divs para que se parezca a lo siguiente:

1 4 
2 5 
3

Espero que alguien pueda ayudar, gracias!

Fuente

2011-09-01 Funky

Siento que quiero un poco más de información tal vez. Quiero decir ... para obtener lo que quieres ... Simplemente tienes que asignar el contenido de manera que corresponda al orden que deseas. Al igual que lo que has hecho con los números. Por supuesto, a menos que desee tomar en cuenta algunas cosas ... pero eso funcionaría. – Joonas

@ funky; puede utilizar CSS3 column-count propiedad para este

css:

div#multicolumn1 { 
     -moz-column-count: 2; 
     -moz-column-gap: 50%; 
     -webkit-column-count: 2; 
     -webkit-column-gap: 50%; 
     column-count: 3; 
     column-gap: 50%; 

}

verificación de este enlace para ver una demostración Div's in two columns

http://jsfiddle.net/sandeep/pMbtk/

nota: no funciona en IE.

Fuente

2011-09-01 09:33:09 sandeep

¡Fantástico! eso funciona muy bien, ¡no tengo que agregar otra columna ni hacer ningún corte! ¡Gracias! – Funky

feliz de ayudar :) – sandeep

column-count: 2; supongo ... por cierto Funky: D – Fanky

Es muy probable que necesite crear dos contenedores div para que esto funcione. Un contenedor que contiene 1-3 y uno para 4-5.

Fuente

2011-09-01 09:31:09 tskulbru

Si no tiene que admitir, es decir, hay css columns que lo haría extactly.

Fuente

2011-09-01 09:34:30 Litek

Este AListApart article habla sobre varias maneras diferentes de respaldar este pre CSS3 escrito. Es demasiado largo para resumir aquí, así que solo publicaré el enlace.

Fuente

2012-01-17 04:19:47 mrtsherman

cómo apilar divs de arriba a abajo en CSS

Respuesta

Cuestiones relacionadas