Diseño de columna en HTML (5)/CSS

Question

¿Existe alguna manera en HTML5/CSS de mostrar las columnas como se muestra a continuación, y aún así tener el flujo de texto correctamente?

###### ###### 
# C1 # # C2 # 
# # # # 
###### ###### 

###### ###### 
# C3 # # C4 # 
# # # # 
###### ###### 

###### ###### 
# C5 # # C6 # 
# # # # 
###### ###### 

sólo para aclarar - quiero ser capaz de escribir todo el texto dentro de un solo elemento y tienen la CSS crear las columnas.

Answer 1

Si está utilizando HTML5, entonces supongo que está bien utilizando CSS3 también:

<style> 
    .columns{ 
    -webkit-column-count: 2; 
    -webkit-column-rule: 0px; 
    -moz-column-count: 2; 
    -moz-column-rule: 0px; 
    } 
</style> 

<div class="containter"> 
    <div class="columns"> 
    <div>C1</div> 
    <div>C2</div> 
    </div> 
    <div class="columns"> 
    <div>C3</div> 
    <div>C4</div> 
    </div> 
    <div class="columns"> 
    <div>C5</div> 
    <div>C6</div> 
    </div> 
</div> 
... 

Pero para ser honesto, creo que es mejor por flotando 6 divs en una caja doble de la anchura de los divs:

<style> 
    .containter{ 
    width: 300px; 
    } 
    .containter div{ 
    width: 150px; 
    float: left; 
    } 
</style> 

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

Answer 2

Aunque esto utiliza un solo elemento, los saltos se deben definir manualmente.

Utilice la propiedad column-span y utilice un elemento como <br /> para definir los puntos de corte verticales. El contenido se verá y rendir aproximadamente como:

<p> 
    CSS3 multi 
    <br/> 
    columns are 
    <br /> 
    just awesome. 
</p> 

CSS3 | multi 
----------------- 
columns | are 
----------------- 
just | awesome 

CSS se ve así: prefijos específicos

p { 
    column-count: 2; 
    column-rule: 1em solid black; 
} 

br { 
    column-span: all; 
} 

Agregar navegador (webkit, -moz) en consecuencia. column-span puede que no sea compatible con ningún navegador hasta el día de hoy. Vea esto article para más detalles. Aquí está mi débil attempt que no funcionó en Chrome.

Answer 3

Para NO utilización solución CSS3 jQuery plugin: http://welcome.totheinter.net/columnizer-jquery-plugin/

Ejemplo: http://welcome.totheinter.net/autocolumn/sample1.html

Está funcionando para IE6 +, FF2 +, Safari, Chrome, Opera :)