javascript - attribute - style html
fluye 2 columnas de texto automáticamente con CSS (8)
A continuación, he creado un enfoque estático y dinámico 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:
- Estático (2 columnas)
- Dinámico con JavaScript + CSS (n-columnas)
- 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 .
$(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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="data" class="col50">
<!-- data Start -->
<p>This is paragraph 1. Lorem ipsum ...</p>
<p>This is paragraph 2. Lorem ipsum ...</p>
<p>This is paragraph 3. Lorem ipsum ...</p>
<p>This is paragraph 4. Lorem ipsum ...</p>
<p>This is paragraph 5. Lorem ipsum ...</p>
<p>This is paragraph 6. Lorem ipsum ...</p>
<p>This is paragraph 7. Lorem ipsum ...</p>
<p>This is paragraph 8. Lorem ipsum ...</p>
<p>This is paragraph 9. Lorem ipsum ...</p>
<p>This is paragraph 10. Lorem ipsum ...</p>
<p>This is paragraph 11. Lorem ipsum ...</p>
<!-- data End-->
</div>
<div class="col50"></div>
Dinámico con JavaScript + CSS (n-columnas)
Con este enfoque, básicamente detecto si el bloque necesita convertirse a columnas. El formato es col-{n} . n es el número de columnas que desea crear.
$(document).ready(function () {
splitByColumns(''col-'', 4);
});
function splitByColumns(prefix, gap) {
$(''[class^="'' + prefix + ''"]'').each(function(index, el) {
var me = $(this);
var count = me.attr("class").split('' '').filter(function(className) {
return className.indexOf(prefix) === 0;
}).reduce(function(result, value) {
return Math.max(parseInt(value.replace(prefix, '''')), result);
}, 0);
var paragraphs = me.find(''p'').get();
me.empty(); // We now have a copy of the children, we can clear the element.
var size = paragraphs.length;
var percent = 1 / count;
var width = (percent * 100 - (gap / count || percent)).toFixed(2) + ''%'';
var limit = Math.round(size / count);
var incr = 0;
var gutter = gap / 2 + ''px'';
for (var col = 0; col < count; col++) {
var colDiv = $(''<div>'').addClass(''col'').css({ width: width });
var css = {};
if (col > -1 && col < count -1) css[''margin-right''] = gutter;
if (col > 0 && col < count) css[''margin-left''] = gutter;
colDiv.css(css);
for (var line = 0; line < limit && incr < size; line++) {
colDiv.append(paragraphs[incr++]);
}
me.append(colDiv);
}
});
}
.col {
display: inline-block;
vertical-align: top;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="data" class="col-6">
<!-- data Start -->
<p>This is paragraph 1. Lorem ipsum ...</p>
<p>This is paragraph 2. Lorem ipsum ...</p>
<p>This is paragraph 3. Lorem ipsum ...</p>
<p>This is paragraph 4. Lorem ipsum ...</p>
<p>This is paragraph 5. Lorem ipsum ...</p>
<p>This is paragraph 6. Lorem ipsum ...</p>
<p>This is paragraph 7. Lorem ipsum ...</p>
<p>This is paragraph 8. Lorem ipsum ...</p>
<p>This is paragraph 9. Lorem ipsum ...</p>
<p>This is paragraph 10. Lorem ipsum ...</p>
<p>This is paragraph 11. Lorem ipsum ...</p>
<!-- data End-->
</div>
Dinámico con JavaScript + CSS3 (n-columnas)
Esto se ha derivado de la segunda respuesta de . Utiliza las reglas CSS3 de column-count column-gap y column-gap .
$(document).ready(function () {
splitByColumns(''col-'', ''4px'');
});
function splitByColumns(prefix, gap) {
var vendors = [ '''', ''-moz'', ''-webkit-'' ];
var getColumnCount = function(el) {
return el.attr("class").split('' '').filter(function(className) {
return className.indexOf(prefix) === 0;
}).reduce(function(result, value) {
return Math.max(parseInt(value.replace(prefix, '''')), result);
}, 0);
}
$(''[class^="'' + prefix + ''"]'').each(function(index, el) {
var me = $(this);
var count = getColumnCount(me);
var css = {};
$.each(vendors, function(idx, vendor) {
css[vendor + ''column-count''] = count;
css[vendor + ''column-gap''] = gap;
});
me.css(css);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="data" class="col-3">
<!-- data Start -->
<p>This is paragraph 1. Lorem ipsum ...</p>
<p>This is paragraph 2. Lorem ipsum ...</p>
<p>This is paragraph 3. Lorem ipsum ...</p>
<p>This is paragraph 4. Lorem ipsum ...</p>
<p>This is paragraph 5. Lorem ipsum ...</p>
<p>This is paragraph 6. Lorem ipsum ...</p>
<p>This is paragraph 7. Lorem ipsum ...</p>
<p>This is paragraph 8. Lorem ipsum ...</p>
<p>This is paragraph 9. Lorem ipsum ...</p>
<p>This is paragraph 10. Lorem ipsum ...</p>
<p>This is paragraph 11. Lorem ipsum ...</p>
<!-- data End-->
</div>
Tengo el código similar al siguiente:
<p>This is paragraph 1. Lorem ipsum ... </p>
<p>This is paragraph 2. Lorem ipsum ... </p>
<p>This is paragraph 3. Lorem ipsum ... </p>
<p>This is paragraph 4. Lorem ipsum ... </p>
<p>This is paragraph 5. Lorem ipsum ... </p>
<p>This is paragraph 6. Lorem ipsum ... </p>
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 <div> 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.
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:
<p class="two-col">Text</p>
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.
<div id="container">
<p>This is paragraph 1. Lorem ipsum ... </p>
<p>This is paragraph 2. Lorem ipsum ... </p>
<p>This is paragraph 3. Lorem ipsum ... </p>
<p>This is paragraph 4. Lorem ipsum ... </p>
<p>This is paragraph 5. Lorem ipsum ... </p>
<p>This is paragraph 6. Lorem ipsum ... </p>
</div>
#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:
<div id="container">
<p>This is paragraph 1. Lorem ipsum ... </p>
<p>This is paragraph 2. Lorem ipsum ... </p>
<div class="clear"></div>
<p>This is paragraph 3. Lorem ipsum ... </p>
<p>This is paragraph 4. Lorem ipsum ... </p>
<div class="clear"></div>
<p>This is paragraph 5. Lorem ipsum ... </p>
<p>This is paragraph 6. Lorem ipsum ... </p>
</div>
/* 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.
<div id="container">
<div class="contentColumn">
<p>This is paragraph 1. Lorem ipsum ... </p>
<p>This is paragraph 2. Lorem ipsum ... </p>
<p>This is paragraph 3. Lorem ipsum ... </p>
</div>
<div class="contentColumn">
<p>This is paragraph 4. Lorem ipsum ... </p>
<p>This is paragraph 5. Lorem ipsum ... </p>
<p>This is paragraph 6. Lorem ipsum ... </p>
</div>
</div>
.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.
No soy un experto aquí, pero esto es lo que hice y funcionó
<html>
<style>
/*Style your div container, must specify height*/
.content {width:1000px; height:210px; margin:20px auto; font-size:16px;}
/*Style the p tag inside your div container with half the with of your container, and float left*/
.content p {width:490px; margin-right:10px; float:left;}
</style>
<body>
<!--Put your text inside a div with a class-->
<div class="content">
<h1>Title</h1>
<p>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. </p>
<p>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;</p>
</div>
</body>
</html>
Una vez que el texto dentro de las etiquetas <p> ha alcanzado la altura del contenedor div, el otro texto fluirá a la derecha del contenedor.
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+''<br/>'');
});
<div id="majors_view" class="span12 pull-left">
<div class="row-fluid">
<div class="span5" id="column1"> </div>
<div class="span5 offset1" id="column2"> </div>
</div>
</div>
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-)
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.
<html>
<head>
<title>great script for dividing things into cols</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script>
$(document).ready(function(){
var count=$(''.firstcol span'').length;
var selectedIndex =$(''.firstcol span'').eq(count/2-1);
var selectIndexafter=selectedIndex.nextAll();
if (count>1)
{
selectIndexafter.appendTo(''.secondcol'');
}
});
</script>
<style>
body{font-family:arial;}
.firstcol{float:left;padding-left:100px;}
.secondcol{float:left;color:blue;position:relative;top:-20;px;padding-left:100px;}
.secondcol h3 {font-size:18px;font-weight:normal;color:grey}
span{}
</style>
</head>
<body>
<div class="firstcol">
<span>1</span><br />
<span>2</span><br />
<span>3</span><br />
<span>4</span><br />
<span>5</span><br />
<span>6</span><br />
<span>7</span><br />
<span>8</span><br />
<span>9</span><br />
<span>10</span><br />
<!--<span>11</span><br />
<span>12</span><br />
<span>13</span><br />
<span>14</span><br />
<span>15</span><br />
<span>16</span><br />
<span>17</span><br />
<span>18</span><br />
<span>19</span><br />
<span>20</span><br />
<span>21</span><br />
<span>22</span><br />
<span>23</span><br />
<span>24</span><br />
<span>25</span><br />-->
</div>
<div class="secondcol">
</div>
</body>
</html>
Usando jQuery
Crea una segunda columna y mueve los elementos que necesitas en ella.
<script type="text/javascript">
$(document).ready(function() {
var size = $("#data > p").size();
$(".Column1 > p").each(function(index){
if (index >= size/2){
$(this).appendTo("#Column2");
}
});
});
</script>
<div id="data" class="Column1" style="float:left;width:300px;">
<!-- data Start -->
<p>This is paragraph 1. Lorem ipsum ... </p>
<p>This is paragraph 2. Lorem ipsum ... </p>
<p>This is paragraph 3. Lorem ipsum ... </p>
<p>This is paragraph 4. Lorem ipsum ... </p>
<p>This is paragraph 5. Lorem ipsum ... </p>
<p>This is paragraph 6. Lorem ipsum ... </p>
<!-- data Emd-->
</div>
<div id="Column2" style="float:left;width:300px;"></div>
Actualizar:
O dado que el requisito ahora es tenerlos del mismo tamaño. Sugeriría usar los complementos JQuery precompilados : Columnizer jQuery Plugin