posicionamiento - posicionar div css
¿Cómo distribuir los elementos en un div al lado del otro? (6)
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.
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).
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;
}
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;
}
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.
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>
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:
- 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. - 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.
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
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/
justify-content: space-between y display: flex es todo lo que necesitábamos, ¡pero gracias a @Pratul por la inspiración!