html - inicio - poner elementos en linea css

¿Cómo espaciar uniformemente muchos elementos de bloque en línea?

Question

¿Es posible espaciar uniformemente muchos elementos en un div con ancho variable?

Aquí no está funcionando el ejemplo . Si utilizamos text-align: center; Los elementos estarán centrados, pero el margen: 0 auto; no está trabajando. Quiero lograr algo como justificar + centro:

|..<elem>..<elem>..<elem>..<elem>..|       // for one container width
|..<elem>..<elem>..<elem>..|               // for smaller container width
|....<elem>....<elem>....|                 // even smaller container

El contenedor será de tamaño variable para el usuario. Una imagen vale más que 1000 palabras:

Ancho del contenedor (caja roja): 100%; Así que el usuario puede cambiar su tamaño (ventana del navegador, js, lo que sea).
<--> representan espacios pares. En la segunda fila <--> son más grandes porque hay más espacio. Pude fingir con:

text-align:center;
word-spacing:3em;    // but any fixed value looses proportion

Answer 1

Recientemente leí sobre una técnica muy inteligente para hacer exactamente lo que me estás preguntando.

En resumen, solo necesitas usar text-align:justify; en el elemento contenedor para lograr esto, junto con un bloque invisible adicional al final.

Esto funciona porque inline-block elementos de inline-block se ven como parte del contenido del texto, y cada uno es efectivamente una sola palabra.

El uso de justify expandirá las palabras en su texto para que llenen todo el ancho del elemento con espacio adicional entre las palabras. Para inline-block elementos de inline-block , esto significa que están espaciados con espacios par entre ellos.

Mencioné un bloque extra invisible al final. Esto es necesario porque la text-align:justify normal del text-align:justify no justificará la última línea de texto. Para texto normal, eso es exactamente lo que desea, pero para alinear cuadros de inline-block , desea que todos estén alineados.

La solución es agregar un elemento extra invisible pero de 100% de ancho al final de su lista de elementos de inline-block . Esto se convertirá efectivamente en la última línea de texto y, por lo tanto, la técnica de justify funcionará para el resto de los bloques.

Puede usar :after pseudo-selector para crear el elemento invisible sin necesidad de modificar su marca.

Aquí hay una versión actualizada de su jsFiddle para demostrar: http://jsfiddle.net/ULQwf/298/

Y aquí está el artículo original que lo explica con más detalle: http://www.barrelny.com/blog/text-align-justify-and-rwd/

[EDITAR] Una actualización final después de ver la imagen que ha agregado a la pregunta. (No tengo una mejor respuesta, pero algunos pensamientos adicionales que pueden ser útiles).

Idealmente, lo que necesita aquí es un :last-line selector de :last-line . Luego, podría text-align:justify el texto principal y text-align:center la última línea. Eso haría lo que quieras.

Lamentablemente,: la :last-line no es un selector válido ( :first-line es, pero no :last-line ), así que ese es el final de esa idea.

Un pensamiento un poco más optimista es text-align-last , que existe como característica. Esto podría hacer exactamente lo que quieres:

text-align:justify;
text-align-last:center;

Perfecto.

Excepto que no es estándar y tiene un soporte de navegador muy limitado.

Puedes leer sobre aquí en MDN .

Supongo que, como último recurso, podría ser una opción para usted, si puede vivir solo con soporte parcial del navegador. Al menos obtendría lo que desea para algunos de sus usuarios. Pero esa no es realmente una manera sensata de ir.

Sin embargo, mi intuición es que esto está tan cerca como te vas a poner. Tantalizadamente cerca de lo que quieres, pero no del todo. Espero que esté equivocado, pero me sorprenderá. Lástima, porque me parece perfectamente lógico querer hacerlo.

Answer 2

Si se intenta un enfoque diferente, en el violín se ve bastante similar a la imagen, pero el espacio se fija en ambas líneas, pero los elementos están intercalados.

div{
    width:250px; /* I changed the div size, because you a have fixed width otherwise you should use scrolling */
    border:1px red solid;
    text-align:center;    /* You will justify to 100$ of containing div, if you want to "center" just add another div with % size and centered */
}
div span{ /* I worked with your example you may use a class */
    width:60px;
    float:justify;
    border:1px yellow solid;
    display: inline-block; /* Inline-block */ 
      margin-left:2%;
    margin-right:2%;

}

Answer 3

Trabajé en su ejemplo, usted tiene que hacer una combinación de estilo de bloque / en línea ya que la justificación sola solo funciona para en línea (texto).

div{
    width:530px; /* I changed the div size, because you a have fixed width otherwise you should use scrolling */
    border:1px red solid;
    text-align:justify;    /* You will justify to 100$ of containing div, if you want to "center" just add another div with % size and centered */

}
div span{ /* I worked with your example you may use a class */
    width:60px;
    border:1px yellow solid;
    display: inline-block; /* Inline-block */ 
    position: relative; /* relative to container div*/
}

div:before{
    content: ''''; /* position for block element*/
    display: block; /* the block part for the last item*/
    width: 100%;
}

div:after {
    content: '''';
    display: inline-block; /* inline-block for the first (and middle elements) */
    width: 100%;
}