etiqueta - div id html

Ancho fluido con DIVs igualmente espaciados

Question

Tengo un contenedor de ancho fluido DIV.

Dentro de esto tengo 4 DIVs todos los 300px x 250px ...

<div id="container">
   <div class="box1"> </div>
   <div class="box2"> </div>
   <div class="box3"> </div>
   <div class="box4"> </div>
</div>

Lo que quiero que suceda es que la caja 1 se mueva a la izquierda, la caja 4 a la derecha y las cajas 2 y 3 para que estén espaciadas uniformemente entre ellas. Quiero que el espacio sea fluido también, de modo que el navegador se haga más pequeño y el espacio también se haga más pequeño.

Answer 1

Esto me funcionó con 5 imágenes en diferentes tamaños.

1. Crear un contenedor div
2. Una lista desordenada para las imágenes.
3. En css, los desordenados deben 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, que se muestra horizontalmente.

En CSS

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

En html

<div id="container"> 
  <ul>  
        <li><img src="box1.png"><li>
        <li><img src="box2.png"><li>
        <li><img src="box3.png"><li>
        <li><img src="box4.png"><li>
        <li><img src="box5.png"><li>
    </ul>
</div>

Answer 2

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 entonces simplemente:

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

demostración: http://jsfiddle.net/QPrk3/

Sin embargo , actualmente esto 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 cubrir más navegadores al incluir una sintaxis más antigua:

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

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

Answer 3

Otras publicaciones han mencionado flexbox , pero si se necesita más de una fila de elementos , la propiedad de space-between las 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 ( demostración 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 el elemento contenedor un contenedor de rejilla.

2) Establezca la cuadrícula con una cantidad de columnas ''automática'', según sea necesario. Esto se hace para diseños sensibles. El ancho de cada columna será de 120px. (Tenga en cuenta el uso de auto-fit (como corresponde al 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. (Consulte esta demostración para ver de lo que estoy hablando)).

3) Establezca espacios / canales para las filas y columnas de la cuadrícula; aquí, ya que desea un diseño de ''espacio intermedio'', el espacio será un espacio mínimo ya que 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;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Demostración de Codepen (Redimensionar para ver el efecto)

Soporte del navegador - Caniuse

Actualmente soportado por Chrome (Blink), Firefox, Safari y Edge! ... con soporte parcial de IE (Ver este post por Rachel Andrew)

NÓTESE BIEN:

La propiedad de space-between intermedio de Flexbox funciona muy bien para una fila de elementos, pero cuando se aplica a un contenedor flexible que envuelve sus elementos ((con flex-wrap: wrap ) - falla, porque no tiene control sobre la alineación de la última fila de elementos ; la última fila siempre estará justificada (normalmente no es lo que quieres)

Demostrar:

body {
  margin: 0;
}
ul {
  
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: flex-start;
  
  list-style: none;
  width: 90vw;
  height: 90vh;
  margin: 2vh auto;
  border: 5px solid green;
  padding: 0;
  overflow: auto;
  
}
li {
  background: tomato;
  width: 110px;
  height: 80px;
  margin-bottom: 1rem;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Codepen (Cambiar el tamaño para ver de lo que estoy hablando)

Lectura adicional en grillas CSS:

• MDN
• Jen Simmons - Aprender la cuadrícula CSS
• Una guía completa para CSS Grid | Codrops CSS Reference
• Una guía completa para Grid - CSS Tricks

Answer 4

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

Caso 1: Justificación de cuadros en una sola línea ( FIDDLE )

El marcado es simple: un montón 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 corregir un error de IE9 + calc / rounding - ver here

Caso 2: Justificación de 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 uno de los estados de #columns, donde luego uso calc () para calcular el margen derecho de cada uno de los elementos (excepto los de la última columna).

Esto parece mucho trabajo, pero si está utilizando MENOS 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 la caja, tendrá que resolver todo nuevamente)

A continuación se muestra un ejemplo que usa MENOS: (Puedes copiar / pegar este código here para jugar con él, [también es el código que utilicé para generar el violín mencionado anteriormente))

@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;
    }
}

Básicamente, primero debe decidir el ancho de la caja y el margen mínimo que desea entre las cajas.

Con eso, puedes calcular cuánto espacio necesitas 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 tiene más de una fila de casillas, las casillas de la última fila no se "justifican", por ejemplo: si quedan 2 casillas. la última fila: no quiero que la primera casilla esté a la izquierda y la siguiente a la derecha, sino que las cajas se sigan en orden.

Con respecto al soporte del navegador : Esto funcionará en IE9 +, Firefox, Chrome, Safari6.0 + - (vea here para más detalles) Sin embargo, me di cuenta de que en IE9 + hay un pequeño problema entre los estados de consulta de los medios. [Si alguien sabe cómo solucionar este problema, realmente me gustaría saberlo :)] <- CORREGIDO here

Answer 5

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 causar una apariencia justificada.

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

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

esto permite que la división central en cada fila tenga un margen que obligue a la primera y tercera división a los bordes exteriores del contenedor

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

Answer 6

en jQuery puede apuntar directamente al Padre.

ESTO ES ÚTIL SI NO SABE EXACTAMENTE CÓMO SE AGREGARÁN DINÁMICAMENTE A MUCHOS NIÑOS O SI NO PUEDE FIGURAR 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 los parent crezcan horizontalmente a medida que se agregan beng a los children .

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

Espero que ayude.

Answer 7

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

• ¡Esto funciona en IE6 + y en todos los navegadores modernos!
• He reducido a la mitad las dimensiones solicitadas para facilitar el trabajo.
• 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 para IE6 / 7, vea aquí .
• font-size: 0; line-height: 0 font-size: 0; line-height: 0 corrige 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
}

<div id="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
  <span class="stretch"></span>
</div>

El span adicional ( .stretch ) se puede reemplazar con :after .

Esto todavía funciona en todos los mismos navegadores que la solución anterior. :after no funciona en IE6 / 7, pero distribute-all-lines modos están usando distribute-all-lines , así que no importa.

Consulte: http://jsfiddle.net/thirtydot/EDp8R/3/

Hay un pequeño inconveniente para :after : para que la última fila funcione perfectamente en Safari, debes tener cuidado con los espacios en blanco en el HTML.

Específicamente, esto no funciona:

<div id="container">
    ..
    <div class="box3"></div>
    <div class="box4"></div>
</div>

Y esto hace:

<div id="container">
    ..
    <div class="box3"></div>
    <div class="box4"></div></div>

Puede usar esto para cualquier número arbitrario de boxN sin agregar una clase boxN a cada uno cambiando

.box1, .box2, .box3, .box4 { ...

a

#container > div { ...

Esto selecciona cualquier div que sea el primer elemento secundario del #container div, y ningún otro debajo de él. Para generalizar los colores de fondo, puede usar el selector de orden n CSS3 , aunque solo es compatible con IE9 + y otros navegadores modernos:

.box1, .box3 { ...

se convierte en:

#container > div:nth-child(odd) { ...

Vea here para un ejemplo de jsfiddle.