Ancho del fluido con DIV igualmente espaciados

Tengo un contenedor DIV de ancho de fluido.

Dentro de esto tengo 4 DIVs todos 300px x 250px …

Lo que quiero que suceda es que la casilla 1 se dejó flotar a la izquierda, la casilla 4 se dejó flotar a la derecha y las casillas 2 y 3 se espaciaron de manera uniforme entre ellas. Quiero que el espaciado también sea fluido, así como el navegador se hace más pequeño, el espacio también se vuelve más pequeño.

enter image description here

Ver: http://jsfiddle.net/thirtydot/EDp8R/

  • Esto funciona en IE6 + y en todos los navegadores modernos.
  • Reduje a la mitad las dimensiones solicitadas solo para que sea más fácil trabajar con ellas.
  • text-align: justify .stretch combinado con .stretch es lo que maneja el posicionamiento.
  • display:inline-block; *display:inline; zoom:1 display:inline-block; *display:inline; zoom:1 corrige inline-block en inline-block para IE6 / 7, mira aquí .
  • font-size: 0; line-height: 0 font-size: 0; line-height: 0 soluciona un problema menor en IE6.
 #container { border: 2px dashed #444; height: 125px; text-align: justify; -ms-text-justify: distribute-all-lines; text-justify: distribute-all-lines; /* just for demo */ min-width: 612px; } .box1, .box2, .box3, .box4 { width: 150px; height: 125px; vertical-align: top; display: inline-block; *display: inline; zoom: 1 } .stretch { width: 100%; display: inline-block; font-size: 0; line-height: 0 } .box1, .box3 { background: #ccc } .box2, .box4 { background: #0ff } 
 

La forma más fácil de hacer esto ahora es con un flexbox:

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

El CSS es simplemente:

 #container { display: flex; justify-content: space-between; } 

demo: http://jsfiddle.net/QPrk3/

Sin embargo , esto actualmente solo es compatible con navegadores relativamente recientes ( http://caniuse.com/flexbox ). Además, la especificación para el diseño de flexbox ha cambiado varias veces, por lo que es posible abarcar más navegadores incluyendo, además, una syntax anterior:

http://css-tricks.com/old-flexbox-and-new-flexbox/

http://css-tricks.com/using-flexbox/

Si css3 es una opción, esto se puede hacer usando la función css calc() .

Caso 1: Justificar casillas en una sola línea ( FIDDLE )

El marcado es simple: un grupo de divs con algún elemento contenedor.

CSS se ve así:

 div { height: 100px; float: left; background:pink; width: 50px; margin-right: calc((100% - 300px) / 5 - 1px); } div:last-child { margin-right:0; } 

donde -1px para arreglar un error IE9 + calc / rounding – vea aquí

Caso 2: Justificar cuadros en múltiples líneas ( FIDDLE )

Aquí, además de la función calc() , media queries son necesarias.

La idea básica es configurar una consulta de medios para cada estado de #columns, donde luego uso calc () para calcular el margen-derecho en cada uno de los elementos (excepto los de la última columna).

Esto parece mucho trabajo, pero si estás usando LESS o SASS esto se puede hacer con bastante facilidad

(Todavía se puede hacer con CSS regular, pero luego tendrá que hacer todos los cálculos manualmente, y luego, si cambia el ancho de su caja, deberá volver a calcular todo)

A continuación se muestra un ejemplo que utiliza LESS: (Puede copiar / pegar este código aquí para jugar con él, [es también el código que utilicé para generar el violín antes mencionado])

 @min-margin: 15px; @div-width: 150px; @3divs: (@div-width * 3); @4divs: (@div-width * 4); @5divs: (@div-width * 5); @6divs: (@div-width * 6); @7divs: (@div-width * 7); @3divs-width: (@3divs + @min-margin * 2); @4divs-width: (@4divs + @min-margin * 3); @5divs-width: (@5divs + @min-margin * 4); @6divs-width: (@6divs + @min-margin * 5); @7divs-width: (@7divs + @min-margin * 6); *{margin:0;padding:0;} .container { overflow: auto; display: block; min-width: @3divs-width; } .container > div { margin-bottom: 20px; width: @div-width; height: 100px; background: blue; float:left; color: #fff; text-align: center; } @media (max-width: @3divs-width) { .container > div { margin-right: @min-margin; } .container > div:nth-child(3n) { margin-right: 0; } } @media (min-width: @3divs-width) and (max-width: @4divs-width) { .container > div { margin-right: ~"calc((100% - @{3divs})/2 - 1px)"; } .container > div:nth-child(3n) { margin-right: 0; } } @media (min-width: @4divs-width) and (max-width: @5divs-width) { .container > div { margin-right: ~"calc((100% - @{4divs})/3 - 1px)"; } .container > div:nth-child(4n) { margin-right: 0; } } @media (min-width: @5divs-width) and (max-width: @6divs-width) { .container > div { margin-right: ~"calc((100% - @{5divs})/4 - 1px)"; } .container > div:nth-child(5n) { margin-right: 0; } } @media (min-width: @6divs-width){ .container > div { margin-right: ~"calc((100% - @{6divs})/5 - 1px)"; } .container > div:nth-child(6n) { margin-right: 0; } } 

Entonces, básicamente, primero necesita decidir el ancho de caja y el margen mínimo que desea entre los cuadros.

Con eso, puede calcular cuánto espacio necesita para cada estado.

Luego, use calc () para calcular el margen derecho y nth-child para eliminar el margen derecho de los cuadros en la columna final.

La ventaja de esta respuesta sobre la respuesta aceptada que usa text-align:justify es que cuando tienes más de una fila de casillas, las casillas en la fila final no se ‘justifican’, por ejemplo: si quedan 2 casillas en la última fila, no quiero que la primera casilla esté a la izquierda y la siguiente a la derecha, sino que las casillas se siguen en orden.

Con respecto a la compatibilidad con el navegador : Esto funcionará en IE9 +, Firefox, Chrome, Safari6.0 + – (ver aquí para más detalles) Sin embargo, noté que en IE9 + hay un poco de error entre los estados de consulta de los medios. [si alguien sabe cómo solucionar esto me gustaría saber :)] <- ARREGLADO AQUÍ

Otras publicaciones han mencionado flexbox , pero si es necesaria más de una fila de elementos , el space-between propiedades de flexbox falla (ver el final de la publicación)

Hasta la fecha, la única solución limpia para esto es con el

Módulo de diseño de cuadrícula CSS ( demo de Codepen )

Básicamente, el código relevante necesario se reduce a esto:

 ul { display: grid; /* (1) */ grid-template-columns: repeat(auto-fit, 120px); /* (2) */ grid-gap: 1rem; /* (3) */ justify-content: space-between; /* (4) */ align-content: flex-start; /* (5) */ } 

1) Hacer que el contenedor sea un contenedor de red

2) Configure la cuadrícula con una cantidad “automática” de columnas, según sea necesario. Esto se hace para diseños receptivos. El ancho de cada columna será 120px. (Tenga en cuenta el uso del auto-fit (como apposed para auto-fill ) que (para un diseño de 1 fila) colapsa las pistas vacías a 0, lo que permite que los elementos se expandan para ocupar el espacio restante. (Mire esta demostración para ver de lo que estoy hablando)).

3) Establecer espacios vacíos / canaletas para las filas y columnas de la cuadrícula; aquí, dado que se desea un diseño de ‘espacio entre’, la brecha en realidad será un espacio mínimo porque crecerá según sea necesario.

4) y 5) – Similar a flexbox.

 body { margin: 0; } ul { display: grid; grid-template-columns: repeat(auto-fit, 120px); grid-gap: 1rem; justify-content: space-between; align-content: flex-start; /* boring properties: */ list-style: none; width: 90vw; height: 90vh; margin: 2vh auto; border: 5px solid green; padding: 0; overflow: auto; } li { background: tomato; height: 120px; } 
 

en jQuery , puede orientar a los padres directamente.

ESTO ES ÚTIL SI NO SABES EXACTAMENTE CUÁNTOS NIÑOS SERÁN AÑADIDOS DINÁMICAMENTE O SI SIMPLEMENTE NO PUEDES DETERMINAR SU NÚMERO.

 var tWidth=0; $('.children').each(function(i,e){ tWidth += $(e).width(); ///Example: If the Children have a padding-left of 10px;.. //You could do instead: tWidth += ($(e).width()+10); }) $('#parent').css('width',tWidth); 

Esto permitirá que el parent crezca horizontalmente a medida que los children se agreguen.

NOTA: Esto supone que los '.children' tienen un width y un conjunto de Height

Espero que ayude.

Si conoce la cantidad de elementos por “fila” y el ancho del contenedor, puede usar un selector para agregar un margen a los elementos que necesita para obtener un aspecto justificado.

Tenía filas de tres divs que quería justificado, así que usé el:

.tile:nth-child(3n+2) { margin: 0 10px }

esto permite que el centro div en cada fila tenga un margen que fuerce el 1er y 3er div a los bordes exteriores del contenedor

También es ideal para otras cosas como bordes, colores de fondo, etc.

Esto funcionó para mí con 5 imágenes en diferentes tamaños.

  1. Crear un contenedor div
  2. Una lista desordenada para las imágenes
  3. En css el no editado debe mostrarse verticalmente y sin viñetas
  4. Justificar el contenido del contenedor div

Esto funciona debido a justify-content: space-between, y está en una lista, se muestra horizontalmente.

En CSS

  #container { display: flex; justify-content: space-between; } #container ul li{ display:inline; list-style-type:none; } 

En html