fluye 2 columnas de texto automáticamente con CSS

Tengo el código similar al siguiente:

This is paragraph 1. Lorem ipsum ...

This is paragraph 2. Lorem ipsum ...

This is paragraph 3. Lorem ipsum ...

This is paragraph 4. Lorem ipsum ...

This is paragraph 5. Lorem ipsum ...

This is paragraph 6. Lorem ipsum ...

Me gustaría, sin marcar, si es posible, hacer que este texto fluya en dos columnas (1-3 a la izquierda, 4-6 a la derecha). El motivo de mi duda al agregar una columna con un

es que este texto es ingresado por el cliente a través de un editor WYSIWYG, por lo que cualquier elemento que inyecte es probable que sea eliminado más tarde o inexplicablemente.

Usando jQuery

Crea una segunda columna y mueve los elementos que necesitas en ella.

  

This is paragraph 1. Lorem ipsum ...

This is paragraph 2. Lorem ipsum ...

This is paragraph 3. Lorem ipsum ...

This is paragraph 4. Lorem ipsum ...

This is paragraph 5. Lorem ipsum ...

This is paragraph 6. Lorem ipsum ...

Actualizar:

O dado que el requisito ahora es tenerlos del mismo tamaño. Sugeriría usar los complementos JQuery precomstackdos : Columnizer jQuery Plugin

http://jsfiddle.net/dPUmZ/1/

Use CSS3

 .container { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } 

Soporte del navegador

  • Chrome 4.0+ ( -webkit- )
  • IE 10.0+
  • Firefox 2.0+ ( -moz- )
  • Safari 3.1+ ( -webkit- )
  • Opera 15.0+ ( -webkit- )

Flotar automáticamente dos columnas una junto a la otra no es posible actualmente solo con CSS / HTML. Dos formas de lograr esto:

Método 1: cuando no hay texto continuo, solo muchos párrafos no relacionados:

Flote todos los párrafos a la izquierda, proporcióneles la mitad del ancho del elemento contenedor y, si es posible, establezca una altura fija.

 

This is paragraph 1. Lorem ipsum ...

This is paragraph 2. Lorem ipsum ...

This is paragraph 3. Lorem ipsum ...

This is paragraph 4. Lorem ipsum ...

This is paragraph 5. Lorem ipsum ...

This is paragraph 6. Lorem ipsum ...

#container { width: 600px; } #container p { float: left; width: 300px; /* possibly also height: 300px; */ }

También puede insertar divisiones más claras entre párrafos para evitar tener que usar una altura fija. Si desea dos columnas, agregue un divisor más claro entre dos y dos párrafos. Esto alineará la parte superior de los dos párrafos siguientes, haciendo que se vea más ordenado. Ejemplo:

 

This is paragraph 1. Lorem ipsum ...

This is paragraph 2. Lorem ipsum ...

This is paragraph 3. Lorem ipsum ...

This is paragraph 4. Lorem ipsum ...

This is paragraph 5. Lorem ipsum ...

This is paragraph 6. Lorem ipsum ...

/* in addition to the above CSS */ .clear { clear: both; height: 0; }

Método 2: cuando el texto es continuo

Más avanzado, pero se puede hacer.

 

This is paragraph 1. Lorem ipsum ...

This is paragraph 2. Lorem ipsum ...

This is paragraph 3. Lorem ipsum ...

This is paragraph 4. Lorem ipsum ...

This is paragraph 5. Lorem ipsum ...

This is paragraph 6. Lorem ipsum ...

.contentColumn { width: 300px; float: left; } #container { width: 600px; }

Cuando se trata de la facilidad de uso: ninguno de estos es realmente fácil para un cliente no técnico. Puede tratar de explicarle cómo hacer esto correctamente y decirle por qué. Aprender HTML muy básico no es una mala idea, de todos modos, si el cliente va a actualizar las páginas web a través de un editor WYSIWYG en el futuro.

O podría intentar implementar alguna solución Javascript que cuente la cantidad total de párrafos, los divida en dos y cree columnas. Esto también se degradará con gracia para aquellos que tienen JavaScript desactivado. Una tercera opción es hacer que todo este splitting-in-columns-action ocurra en el lado del servidor si esta es una opción.

(Método 3: Módulo de diseño de múltiples columnas CSS3)

Puede leer sobre la forma de hacerlo de CSS3 , pero no es realmente práctico para un sitio web de producción. Todavía no, al menos.

Aquí hay un ejemplo de una clase simple de dos columnas:

 .two-col { -moz-column-count: 2; -moz-column-gap: 20px; -webkit-column-count: 2; -webkit-column-gap: 20px; } 

De lo cual se aplicaría a un bloque de texto como ese:

 

Text

No soy un experto aquí, pero esto es lo que hice y funcionó

     

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida laoreet lectus. Pellentesque ultrices consequat placerat. Etiam luctus euismod tempus. In sed eros dignissim tortor faucibus dapibus ut non neque. Ut ante odio, luctus eu pharetra vitae, consequat sit amet nunc. Aenean dolor felis, fringilla sagittis hendrerit vel, egestas eget eros. Mauris suscipit bibendum massa, nec mattis lorem dignissim sit amet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dolor neque. Phasellus tellus odio, egestas ut blandit sed, egestas sit amet velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Una vez que el texto dentro de las tags

ha alcanzado la altura del contenedor div, el otro texto fluirá a la derecha del contenedor.

A continuación, he creado un enfoque estático y dynamic en los párrafos de columnas. El código está prácticamente auto-documentado.

Adelante

A continuación, encontrará los siguientes métodos para crear columnas:

  1. Estático (2 columnas)
  2. Dinámico con JavaScript + CSS (n-columnas)
  3. Dinámico con JavaScript + CSS3 (n-columnas)

Estático (2 columnas)

Este es un diseño simple de 2 columnas. Basado en la primera respuesta de Glennular .

 $(document).ready(function () { var columns = 2; var size = $("#data > p").size(); var half = size / columns; $(".col50 > p").each(function (index) { if (index >= half) { $(this).appendTo(".col50:eq(1)"); } }); }); 
 .col50 { display: inline-block; vertical-align: top; width: 48.2%; margin: 0; } 
  

This is paragraph 1. Lorem ipsum ...

This is paragraph 2. Lorem ipsum ...

This is paragraph 3. Lorem ipsum ...

This is paragraph 4. Lorem ipsum ...

This is paragraph 5. Lorem ipsum ...

This is paragraph 6. Lorem ipsum ...

This is paragraph 7. Lorem ipsum ...

This is paragraph 8. Lorem ipsum ...

This is paragraph 9. Lorem ipsum ...

This is paragraph 10. Lorem ipsum ...

This is paragraph 11. Lorem ipsum ...

Esta solución se dividirá en dos columnas y dividirá el contenido la mitad en una línea en la otra mitad. Esto es útil si está trabajando con datos que se cargan en la primera columna y desea que fluyan de manera uniforme todas las veces. :). Puedes jugar con la cantidad que se pone en el primer col. Esto funcionará con listas también.

Disfrutar.

   great script for dividing things into cols      
1
2
3
4
5
6
7
8
9
10

Tal vez una versión un poco más ajustada? Mi caso de uso está dando salida a especialidades universitarias dado un conjunto json de mayores (datos).

 var count_data = data.length; $.each( data, function( index ){ var column = ( index < count_data/2 ) ? 1 : 2; $("#column"+column).append(this.name+'
'); });