para - tablas en html ejemplos

Solución CSS pura para dividir elementos en una cantidad dinámica de columnas (7)

¿Hay una manera de alinear los elementos en varias columnas, donde el número de columnas depende del elemento más ancho? Tanto la altura del elemento como el ancho del contenedor son fijos, pero el ancho del elemento es dinámico.

Estoy buscando una forma solo de CSS para lograr el siguiente comportamiento:

(Supongamos que el contenedor principal es de 300 px de ancho).
Si el elemento más ancho es más ancho que 150 px, use una sola columna
Si el elemento más ancho está entre 100px y 150px, use dos columnas
Si el elemento más ancho es inferior a 100 px, use tres columnas
...
Si el elemento más ancho es menor que el ancho / N del contenedor, use N columnas

Una forma posible de tener este comportamiento podría ser mediante el uso de display:inline-block y estableciendo la propiedad de ancho al ancho del elemento más ancho del contenedor utilizando JavaScript.

Vea este JSFiddle para un ejemplo:

Sin embargo, estoy pensando que también debería haber una forma de hacer esto solo en CSS. ¿Es posible?

De lo contrario, ¿tal vez exista una forma elegante y única de CSS de distribuir / ajustar los elementos de tamaño dinámico a las columnas en un contenedor con un ancho fijo?

... Estoy buscando una forma solo de CSS para lograr el siguiente comportamiento ... Si el elemento más ancho es más ancho que ...
... Estoy pensando que también debería haber una forma solo de CSS de hacer esto ...

Según lo indicado por @ Paulie-D , CSS no puede detectar anchos variables en las divisiones secundarias y, por lo tanto, no existe una solución de CSS únicamente.

Esto se debe a que desea obtener el ancho de todos los elementos, luego obtener el máximo de esos y luego usar ese ancho para distribuir elementos en columnas. Este cálculo está más allá de CSS. Necesitarás Javascript para hacer eso.

De lo contrario, ¿tal vez exista una forma elegante y única de CSS de distribuir / ajustar los elementos de tamaño dinámico a las columnas en un contenedor con un ancho fijo?

Te lo explicaré en dos partes:

Parte 1, el CSS:

Cuando decimos que queremos que el contenido esté en columnas, significa un flujo de arriba a abajo en lugar de un flujo de ajuste de izquierda a derecha. Para esto requerimos columnas CSS.

~~El truco sería especificar auto para column-count / column-width .~~ ~~Esto distribuirá automáticamente el contenido en el número de columnas requeridas dentro del ancho principal.~~

Cometí un error fundamental en la declaración anterior (de ahí otra edición ). Según las especificaciones aquí, el algoritmo dice:

(01) if ((column-width = auto) and (column-count = auto)) then (02) exit; /* not a multicol element */

Aquí es donde me equivoqué antes. Cuando tanto column-count column-width se establecen en auto , se trata como un elemento no multicol . Cuando una de estas propiedades se establece en un valor no automático, la otra propiedad está determinada por esta.

De la referencia anterior :

si column-count se establece en auto , entonces el número de columnas estará determinado por otras propiedades (por ejemplo, column-width , si tiene un valor no automático) y si column-width se establece en auto , entonces el ancho de columna será determinado por otras propiedades (por ejemplo, column-count , si tiene un valor no automático)

Un ejemplo sería establecer column-width fijo, digamos 120px ( lo trataremos en la parte 2 un poco más adelante ):

.container { -webkit-columns: auto 120px; columns: auto 120px; }

Esto hará que el contenedor se ajuste al contenido en tantas columnas como sea posible para un ancho de columna de 120px dentro de su propio ancho. Si aumenta el ancho del contenedor, obtendrá más columnas. Si reduce el ancho del contenedor, obtendrá menos columnas que eventualmente colapsarán en una sola columna cuando no haya mucho espacio disponible.

Vea el ejemplo completo en el siguiente fragmento de código:

Ejemplo 1 :

* { box-sizing: border-box; padding: 0; margin: 0; } p { margin-left: 16px; } .container { width: 400px; border: 1px solid #f00; margin: 16px; } .container.col { -webkit-columns: auto 120px; columns: auto 120px; } .container > div { -webkit-column-break-inside: avoid; column-break-inside: avoid; display: block; padding: 8px; border: 1px solid #ccc; } #one { width: 200px; } #two { width: 300px; }

<p>Small Container (1-column):</p> <div id="one" class="container col"> <div class="item-min">Maudie Mcmanus</div> <div class="item-min">Remedios</div> <div class="item-min">Chaya B</div> <div class="item-min">Duncan</div> <div class="item-min">Lashonda</div> </div> <p>Medium Container (2-column):</p> <div id="two" class="container col"> <div class="item-min">Maudie Mcmanus</div> <div class="item-min">Remedios</div> <div class="item-min">Chaya B</div> <div class="item-min">Duncan</div> <div class="item-min">Lashonda</div> </div> <p>Large Container (3-column):</p> <div id="three" class="container col"> <div class="item-min">Maudie Mcmanus</div> <div class="item-min">Remedios</div> <div class="item-min">Chaya B</div> <div class="item-min">Duncan</div> <div class="item-min">Lashonda</div> </div>

Fiddle 1: http://jsfiddle.net/abhitalks/tgwp4b7a/2/show

En el fragmento de código anterior, estamos usando column-count: auto en el contenedor, y un column-width: 120px arbitrario column-width: 120px (solo para demostración). Es todo lo que hay que hacer. Hay tres ejemplos en el código anterior: (1) donde el contenedor es de poco ancho y el contenido se distribuye en una columna, ya que están restringidos por el column-width ; (2) donde el contenedor es de ancho medio y el contenido se distribuye en dos columnas, ya que ahora hay más espacio disponible; y (3) donde el contenedor es de un ancho mucho mayor y puede acomodar tres columnas.

Como efecto secundario, si el ancho del contenedor es en porcentaje, entonces todo el aparato también responde automáticamente. En pantallas más grandes que muestran más columnas, y en pantallas más pequeñas que se contraen en una columna.

Sin embargo, esto depende del ancho fijo que le dé al column-width de column-width del contenedor y, por lo tanto, también se puede llamar una solución de número mágico . Pero, esto no es lo que queremos. No queremos determinar columnas basadas en el ancho del contenedor, queremos que las columnas estén determinadas por el ancho del contenido. Veremos cómo eliminar esa dependencia en la parte 2 que sigue.

Parte 2, ampliándola con Javascript:

Ahora que hemos establecido que los elementos pueden ser distribuidos automáticamente por CSS en columnas, dependiendo del ancho disponible en el padre, podemos extender esto para eliminar nuestra dependencia del ancho fijo a través de Javascript.

Volviendo a su pregunta de:

... Si el artículo más ancho es más ancho que ...

Para determinar el elemento más ancho y aplicar ese ancho al resto de ellos, todo lo que necesita es solo un conocido Javascript de dos líneas:

var maxWidth = Math.max.apply(null, $("div.item").map(function () { return $(this).width(); }).get());

También establecimos div para niños inline-block en inline-block evitar el ajuste para identificar el ancho real. Entonces, todo lo que tienes que agregar al CSS que escribimos en la parte 1 es esto:

.container > div { display: inline-block; white-space: nowrap; /* prevents wrapping and helps getting actual width */ }

Luego debemos hacer dos cosas: (1) establecer el column-width el contenedor a este ancho máximo que calculamos anteriormente; y (2) establezca este ancho en todo el div hijo para permitir que se apilen cuidadosamente. Además, no necesitaremos configurar el column-count / column-width en CSS, porque de todos modos tenemos que hacerlo en Javascript.

$("#container").css({ "column-width": maxWidth }).find(''div'').width(maxWidth);

Vea el ejemplo completo en el siguiente fragmento de código:

Ejemplo 2 :

//large var maxWidth = Math.max.apply(null, $("#one > div").map(function () { return $(this).outerWidth(); }).get()); $("#one").css({ "-webkit-column-width": maxWidth, "column-width": maxWidth }).find(''div'').outerWidth(maxWidth); // medium var maxWidth2 = Math.max.apply(null, $("#two > div").map(function () { return $(this).outerWidth(); }).get()); $("#two").css({ "-webkit-column-width": maxWidth2, "column-width": maxWidth2 }).find(''div'').outerWidth(maxWidth2); // small var maxWidth3 = Math.max.apply(null, $("#three > div").map(function () { return $(this).outerWidth(); }).get()); $("#three").css({"-webkit-column-width": maxWidth3, "column-width": maxWidth3 }).find(''div'').outerWidth(maxWidth3);

* { box-sizing: border-box; padding: 0; margin: 0; } p { margin-left: 16px; } .container { width: 450px; border: 1px solid #f00; margin: 16px; } .container > div { -webkit-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; white-space: nowrap; padding: 8px; border: 1px solid #ccc; }

Fiddle 2: http://jsfiddle.net/abhitalks/ojd57678/4/show

_{(Se modificó el fragmento y el violín anteriores. Gracias a @Yandy_Viera, quien señaló el hecho de que jQuery .outerWdith debería usarse en lugar de .width (que ignora box-sizing: border-box , lo que hace que se establezcan los anchos incorrectos.)}

En el fragmento anterior, ahora estamos usando tres variaciones de ejemplos: (1) donde los div secundarios son de mayor ancho y se distribuyen en una columna, ya que están limitados por el ancho del contenedor; (2) donde las div secundarias son de menor ancho y se distribuyen en dos columnas ya que ahora hay más espacio disponible; y (3) donde las div niños son de un ancho muy pequeño y se pueden acomodar en tres columnas.

Como puede ver, CSS puede ayudar a distribuir el contenido en columnas en función del ancho disponible, pero no puede calcular y aplicar el mayor ancho de los elementos a cada uno de ellos. Para esto, un Javascript de dos líneas haría que hicieras lo que inicialmente querías.

_{Nota: la primera vez que leí su pregunta tenía la impresión de que usted ya tiene una solución de Javascript que funciona, y no estaba seguro de si quería una.} _{Sin embargo, en una segunda lectura me di cuenta de que no lo había hecho, y el ángulo de Javascript era esencial de entender.} _{Por lo tanto, esta edición para agregar una parte de Javascript.}

_{Nota 2: Hubo una falla en la versión anterior de esta respuesta, donde dejé un error fundamental en los valores automáticos de las propiedades de las columnas.} _{Esto requirió otra edición.}

Además de todo lo que dijeron en los comentarios, no existe una solución solo para CSS, así que quería dejarte una buena solución utilizando js en la que ni siquiera tienes que iterar buscando el elemento más amplio, todo proviene de un conjunto de CSS y mates.

Puede cambiar el contenido de los elementos y verá cómo se ajusta el número de columnas, si el elemento más ancho es menor que el ancho de contenedor / N, utilizará N columnas automáticamente.

Echa un vistazo a este JSFiddle para la demostración

La idea es muy simple, se set width: ''auto'' , se display: ''inline-block'' en el container para permitir que se ajuste a su contenido, que se define por el ancho del elemento más ancho, véalo en la siguiente imagen:

Ahora puede utilizar el ancho del container para conocer el ancho del elemento más ancho y esto evita que tenga que iterar buscándolo. En este momento, puede utilizar este ancho para configurar el resto de elementos, pero hagámoslo un poco mejor. Podemos hacer que los elementos ocupen todo el ancho del container solo con un cálculo de basura:

var div = Math.floor(initialWidth / widestItemWidth); /*this is to get as many items fit with the width of the widest element*/ var itemWidth = initialWidth / div; /*for the width of the item occupy the entire container*/

Entonces, si el elemento más ancho es menor que el ancho / N del contenedor, usará N columnas automáticamente y se ajustarán al ancho del container , eso es todo lo que tienes que hacer, solo establece una propiedad css, haz un poco de cálculo y ahí tienes Lo que querías lograr.

$(document).ready(function() { var $container = $(''.container''); var $item = $(''.item''); var initialWidth = $container.outerWidth(); $container.css({ /*to allow it to fit its contents which is defined by the width of the widest element*/ width: ''auto'', display: ''inline-block'' }); var widestItemWidth = $container.outerWidth(); /*Now this is the width of the widest item*/ var div = Math.floor(initialWidth / widestItemWidth); /*this is to get as many items fit with the width of the widest element*/ var itemWidth = initialWidth / div; /*for the width of the item occupy the entire container*/ /*if you don''t want the items occupy the entire width of the container just use ''widestItemWidth'' as width of $item*/ $item.css({ width: itemWidth, float: ''left'' }); $container.css({ /*restoring the initial styles*/ width: initialWidth, display: ''block'' }); })

.container { width: 400px; overflow: hidden; } .container .item { padding: 8px; border: 1px solid rgb(216, 213, 213); } *{ box-sizing: border-box; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="item">Maudie Mcmanus</div> <div class="item">Remedios Arrington</div> <div class="item">Chaya B</div> <div class="item">Duncan</div> <div class="item">Lashonda Tatum Walls</div> </div>

Si desea agregar un margen a sus elementos, solo debe tenerlo en cuenta cuando haga los cálculos de esta manera:

$(document).ready(function() { var $container = $(''.container''); var $item = $(''.item''); var initialWidth = $container.outerWidth(); $container.css({ width: ''auto'', display: ''inline-block'' }); var currentWidth = $container.outerWidth(); var itemMargin= parseInt($item.css(''margin-right'')); var div = Math.floor(initialWidth / currentWidth); var itemWidth = initialWidth / div - itemMargin; /*subtracting the item''s margin from the compute width*/ $item.css({ width: itemWidth, float: ''left'' }); $container.css({ width: initialWidth, display: ''block'' }); })

.container { width: 400px; overflow: hidden; } .container .item { padding: 8px; border: 1px solid rgb(216, 213, 213); margin-right: 3px; } *{ box-sizing: border-box; }

Aquí un ejemplo de JSFiddle para jugar.

Bueno, como muchos otros lo señalaron aquí, no hay una solución solo para CSS. Principalmente porque CSS fue diseñado para ser cargado antes del contenido del dom, por lo que el contenido se muestra muy bien. Nuestro principal problema aquí es que NO sabemos el ancho del elemento de antemano, solo lo sabremos cuando la página se haya cargado. Casi todas las soluciones en la página tienen la misma idea, use Javascript para recorrer los elementos, encuentre el más ancho y configure todos los demás elementos (con la misma clase) al ancho dado. Para mejorar el proceso y convertirlo en una solución de una línea (con jquery, también se puede hacer con Javascript, pero por simplicidad usé jQuery), sugiero el siguiente "hack / trick":

1) No defina el ancho de su contenedor, y configure la pantalla en tabla en lugar de en bloque;

2) No establezca ningún ancho para los elementos dentro del div

Esto hará que los elementos tengan el mismo ancho y se muestren en una columna, por lo que cuando usamos jQuery para obtener el ancho máximo, no necesitamos realizar un bucle a través de los elementos.

Ahora use jQuery para inyectar reglas CSS adicionales en el encabezado del documento para el contenedor y para los elementos. Necesitamos cambiar el tipo de visualización del contenedor de nuevo a bloque en lugar de tabla, establecer su ancho a 400px (o lo que sea que necesitemos) y necesitamos hacer los elementos en bloques en línea con un ancho establecido.

Dado que CSS siempre está aplicando la última propiedad, esto será bastante fácil:

$("<style> .container {display: block; width:400px;} .item-min {width:"+$(".item-min").width()+"px;display:inline-block;}</style>").appendTo("head");

He actualizado tu ejemplo de Fiddler HERE

Lo he probado en IE 12, Edge, Chorme y Firefox y funciona en todos los navegadores.

EDITAR 1

Si no desea usar jQuery para mantener la página lo más ligera posible, también puede usar el siguiente forro de Javascript:

document.head.innerHTML += "<style> .container {display: block; width:400px;} .item-min {width:"+(document.getElementsByClassName("container")[0].clientWidth-16-2)+"px;display:inline-block;}</style>";

Explicación rápida: el contenedor clientWidth incluirá el relleno y el borde de los elementos, ya que el relleno en el ejemplo original es 8px y el borde es 1px, debemos deducirlo dos veces (una vez, una vez a la derecha) del ancho del contenedor .

Ver Fiddle actualizado

Editar 2

Un documento HTML completo:

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type=''text/css''> .container { display:table; table-layout:fixed; } .container .item-min { padding: 8px; border: 1px solid rgb(216, 213, 213); } </style> <script type=''text/javascript''> window.onload=function(){ document.head.innerHTML += "<style> .container {display: block; width:400px;} .item-min {width:"+(document.getElementsByClassName("container")[0].clientWidth-16-2)+"px;display:inline-block;}</style>"; } </script> </head> <body> <div class="container"> <div class="item-min">Maudie Mcmanus</div> <div class="item-min">Remedios Arrington</div> <div class="item-min">Chaya B</div> <div class="item-min">Duncan</div> <div class="item-min">Lashonda Tatum Walls</div> </div> </body> </html>

El más fácil parece establecer el ancho al 32% más claro: ninguno para todas las columnas y un claro separado: ambas clases por cada tercera (última) columna. Agregue consultas de medios para abordar diferentes tamaños de pantalla y establezca el ancho en consecuencia, por ejemplo, 24%, 48%, etc.

En primer lugar, echa un vistazo a la demostración de Fiddle (jugar con el .container del .container .)

Esto no es posible usando solo CSS, pero aquí hay una solución elegante que usa jquery, que detecta el ancho del contenedor, el ancho del elemento más ancho y distribuye los elementos en el número relevante de columnas (creadas dinámicamente).

HTML

<p>Without width: <div class="container"> <div class="item">Maudie Mcmanus</div> <div class="item">Remedios Arrington</div> <div class="item">Chaya B</div> <div class="item">Duncan</div> <div class="item">Lashonda Tatum Walls</div> </div> </p>

Javascript

$(function(){ var $items = $(''.item''); // detect the widest column''s width var widestItemWidth = 0; $items.each(function(){ widestItemWidth = Math.max(widestItemWidth, $(this).width()); }); // calculate the number of columns var $container = $(''.container''); var containerWidth = $container.width(); var numOfColumns = parseInt(containerWidth / widestItemWidth); // create the columns for(var i = 0; i < numOfColumns; i++){ $container.prepend(''<div class="column"></div>''); } var $columns = $(''.column''); $columns.css(''width'', (100/numOfColumns)+''%''); // spread the items between the columns $items.each(function(i){ var columnIndex = i % numOfColumns; $(this).appendTo($columns.eq(columnIndex)); }); });

CSS

.container { width: 400px; } .container .column { display: inline-block; box-sizing: border-box; vertical-align: text-top; } .container .item { display: inline-block; padding: 8px; border: 1px solid rgb(216, 213, 213); }

Lo más cercano que probablemente pueda obtener con una solución CSS pura es usar columnas CSS como lo sugieren otros (o el enfoque de cuadrícula de CSS - Ver Editar) . Pero, la clave es usar unidades relativas y estar muy al tanto de la ubicación y del contenedor de su columna en su diseño y usar consultas de medios para controlar el recuento de columnas. Esto definitivamente no es una solución a prueba de balas. Sin embargo, si está creando el diseño y controlando la ubicación y el alcance del elemento contenedor de columnas, entonces puede controlar el recuento de columnas de manera bastante confiable. Si esto es para un widget que está fuera de su control, de hecho necesitará implementar una solución basada en Javascript.

Enlaces de referencia: Columnas CSS responsivas , diseño de cuadrícula CSS

EDITAR: Después de leer su pregunta de nuevo y ver el ejemplo de su captura de pantalla, parece que en realidad está buscando una solución de cuadrícula CSS común en la que los elementos fluyen horizontalmente y no verticalmente. Actualicé mi respuesta para incluir una demostración de fragmentos de esto donde los bloques vuelven a fluir horizontalmente.

Fragmento de demostración con columnas basadas en consultas de medios y anchos de contenedor (ancho de columna mínimo aproximado de 10em):

#main, #sideBar { box-sizing:border-box; display:block; padding:0; margin:0; width:100%; } .container { width: 100%; min-width:10em; -webkit-columns: 1; -moz-columns: 1; columns: 1; } .container .item { display: block; padding: 8px; border: 1px solid rgb(216, 213, 213); box-sizing:border-box; -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */ } @media only screen and (min-width:20em) { .container { -webkit-columns: 2; -moz-columns: 2; columns: 2; } } @media only screen and (min-width:32em) { #main { float:left; width:65%; } #sideBar { float:left; width:30%; margin-left:5%; } #sideBar .container { -webkit-columns: 1; -moz-columns: 1; columns: 1; } } @media only screen and (min-width:48em) { #main .container { -webkit-columns: 3; -moz-columns: 3; columns: 3; } #sideBar .container { -webkit-columns: 1; -moz-columns: 1; columns: 1; } } @media only screen and (min-width:52em) { #sideBar .container { -webkit-columns: 2; -moz-columns: 2; columns: 2; } } @media only screen and (min-width:100em) { #main .container { -webkit-columns: 5; -moz-columns: 5; columns: 5; } #sideBar .container { -webkit-columns: 3; -moz-columns: 3; columns: 3; } }

<div id="main"><h1>#main</h1> <div class="container"> <div class="item">Maudie Mcmanus</div> <div class="item">Remedios Arrington</div> <div class="item">Chaya B</div> <div class="item">Duncan</div> <div class="item">Lashonda Tatum Walls</div> </div> </div> <div id="sideBar"><h1>#sideBar</h1> <div class="container"> <div class="item">Maudie Mcmanus</div> <div class="item">Remedios Arrington</div> <div class="item">Chaya B</div> <div class="item">Duncan</div> <div class="item">Lashonda Tatum Walls</div> </div> </div>

EDITAR: Agregue esta Demostración de fragmentos usando un enfoque de CSS Grid que vuelve a fluir los bloques horizontalmente en lugar de verticalmente.

#main, #sideBar { box-sizing:border-box; display:block; padding:0; margin:0; width:100%; clear:left; } .container { width: 100%; min-width:10em; } .container .item { display: block; float:left; padding: .5em; border: 1px solid rgb(216, 213, 213); box-sizing:border-box; vertical-align: top; } @media only screen and (min-width:20em) { .container .item { margin: 0 1%; width:48%; } } @media only screen and (min-width:32em) { #main { float:left; width:65%; } #sideBar { float:left; clear:none; width:30%; margin-left:5%; } #sideBar .container .item { margin: 0; width:100%; } } @media only screen and (min-width:48em) { #main .container .item { width:31%; } } @media only screen and (min-width:52em) { #sideBar .container .item { margin: 0 1%; width:48%; } } @media only screen and (min-width:100em) { #main .container .item { width:18%; } #sideBar .container .item { width:31%; } }

Prueba este ejemplo

@media only screen and (device-width : 300px) {#container {width:300px; display:block;}} @media only screen and (device-width : 150px) {#container {width:150px; display:block; float:left}} @media only screen and (device-width : 100px) {#container {width:150px; display:block; float:left}}