posicionamiento - posicionar div css

¿Cómo distribuir los elementos en un div al lado del otro?

Question

Esto es para un menú.
Por ejemplo, tengo un elemento div con 3 tramos, todos los cuales tienen algún margen, ancho máximo y flotación (izquierda o derecha).
Se posiciona comenzando desde el lado izquierdo y sigue así:
[[span1][span2][span3] - lots of free space here].
Quiero hacerlo aún así:
[[span1] - space - [span2] - space - [span3]]
¿Cómo puedo hacer esto usando CSS? Tengo dudas de que no sea posible.
Tenga en cuenta que quiero que mantenga el mismo estilo cuando agregue o elimine un elemento del menú.
HTML:

<div id="menu">
    <span class="menuitem"></span>
    <span class="menuitem"></span>
    <span class="menuitem"></span>
</div>

CSS:

#menu {
    ...
    width:800px;
}
.menuitem {
    display:block;
    float:left;
    margin-left:25px;
    position:relative;
    min-height:35px;
    max-width:125px;
    padding-bottom:10px;
    text-align:center;
}

Answer 1

En los "viejos tiempos", utilizabas una tabla y los elementos del menú se espaciaban uniformemente sin tener que indicar explícitamente el ancho para la cantidad de elementos.

Si no fuera por IE 6 y 7 (si eso es preocupante), entonces puede hacer lo mismo en CSS.

<div class="demo">
    <span>Span 1</span>
    <span>Span 2</span>
    <span>Span 3</span>
</div>

CSS:

div.demo {
    display: table;
    width: 100%;
    table-layout: fixed;    /* For cells of equal size */
}
div.demo span {
    display: table-cell;
    text-align: center;
}

Sin tener que ajustar la cantidad de elementos.

Ejemplo sin table-layout:fixed : las celdas están distribuidas uniformemente en todo el ancho, pero no son necesariamente del mismo tamaño, ya que su ancho está determinado por su contenido.

• http://jsfiddle.net/w3dx/ULQwf/

Ejemplo con table-layout:fixed : las celdas son del mismo tamaño, independientemente de su contenido. (Gracias a @DavidHerse en comentarios para esta adición).

• http://jsfiddle.net/kqHWM/

Si desea que los elementos del menú primero y último estén justificados a la izquierda y a la derecha, puede agregar el siguiente CSS:

div.demo span:first-child {
    text-align: left;
}
div.demo span:last-child {
    text-align: right;
}

Answer 2

Esta es la manera rápida y fácil de hacerlo

<div>
    <span>Span 1</span>
    <span>Span 2</span>
    <span>Span 3</span>
</div>

css

div{
    width:100%;
}
span{
    display:inline-block;    
    width:33%;
    text-align:center;
}

Luego, ajuste el width de los span para el número que tiene.

Ejemplo: http://jsfiddle.net/jasongennaro/wvJxD/

Answer 3

Hacer todos los tramos usados ​​en elementos de bloque en línea. Cree un tramo de tramo vacío con un ancho del 100% debajo de la lista de tramos que contienen los elementos del menú. Luego, haga que el div que contiene los tramos text-align: justificado. Esto forzaría a los elementos de bloque en línea [los elementos del menú] a distribuirlos de manera uniforme.

https://jsfiddle.net/freedawirl/bh0eadzz/3/

  <div id="container">

          <div class="social">
            <a href="#" target="_blank" aria-label="facebook-link">
            <img src="http://placehold.it/40x40">
            </a>
            <a href="#" target="_blank" aria-label="twitter-link">
                <img src="http://placehold.it/40x40">
            </a>
            <a href="#" target="_blank" aria-label="youtube-link">
                <img src="http://placehold.it/40x40">
            </a>
            <a href="#" target="_blank" aria-label="pinterest-link">
                 <img src="http://placehold.it/40x40">
            </a>
            <a href="#" target="_blank" aria-label="snapchat-link">
                <img src="http://placehold.it/40x40">
            </a>
            <a href="#" target="_blank" aria-label="blog-link">
                 <img src="http://placehold.it/40x40">
            </a>

            <a href="#" aria-label="phone-link">
                 <img src="http://placehold.it/40x40">
            </a>
            <span class="stretch"></span>
          </div>
             </div>

Answer 4

Puedes usar justify.

Esto es similar a las otras respuestas, excepto que los elementos de la izquierda y de la derecha estarán en los bordes en lugar de estar espaciados equitativamente - [a ... b ... c en lugar de .a..b..c]

<div class="menu">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

<style>
.menu {text-align:justify;}
.menu:after { content:'' ''; display:inline-block; width: 100%; height: 0 }
.menu > span {display:inline-block} 
</style>

Una cosa es que debes dejar espacios entre cada elemento. [Ver el violín.]

Hay dos razones para configurar los elementos del menú en bloque en línea:

1. Si el elemento es por defecto un elemento de nivel de bloque (como un <li> ), la pantalla debe configurarse en línea o en bloque en línea para permanecer en la misma línea.
2. Si el elemento tiene más de una palabra ( <span>click here</span> ), cada palabra se distribuirá de manera uniforme cuando se establezca en línea, pero solo los elementos se distribuirán cuando se establezca en bloque en línea.

Ver el JSFiddle

EDITAR:
Ahora que flexbox tiene un amplio soporte (todos los que no son de IE, y IE 10+), hay una "mejor manera".
Asumiendo la misma estructura de elementos que arriba, todo lo que necesita es:

<style>
    .menu { display: flex; justify-content: space-between; }
</style>

Si desea que los elementos externos también estén espaciados, simplemente cambie el espacio entre el espacio y el espacio.
Ver el JSFiddle

Answer 5

Si alguien quiere probar un enfoque ligeramente diferente, puede usar FLEX.

HTML

<div class="test">
    <div>Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
    <div>Div 4</div>
</div>

CSS

.test {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}
.test > div {
    margin-top: 10px;
    padding: 20px;
    background-color: #FF0000;
}

Aquí está el violín: http://jsfiddle.net/ynemh3c2/ (Pruebe agregar / eliminar divs también)

Aquí es donde aprendí sobre esto: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 6

justify-content: space-between y display: flex es todo lo que necesitábamos, ¡pero gracias a @Pratul por la inspiración!