Foros del Web » Creando para Internet » CSS »

Alinear divs exactamente

Estas en el tema de Alinear divs exactamente en el foro de CSS en Foros del Web. Quiero hacer que los divs contenidos dentro de otro div y alineados horizontalmente encajen perfectamente el ancho del div contenedor, por ejemplo que el primero ...
  #1 (permalink)  
Antiguo 21/01/2012, 20:14
Avatar de Marsh2  
Fecha de Ingreso: junio-2008
Mensajes: 17
Antigüedad: 15 años, 10 meses
Puntos: 0
Alinear divs exactamente

Quiero hacer que los divs contenidos dentro de otro div y alineados horizontalmente encajen perfectamente el ancho del div contenedor, por ejemplo que el primero quede alineado completamente a la izquierda, el ultimo alineado completamente a la derecha y los de en medio alineados hacia el centro, todos con el mismo espacio entre si. Pongo un ejemplo para hacerlo mas claro:

Código HTML:
<div style="width:430px">
     <div style="width:100px">
     <div style="width:100px">
     <div style="width:100px">
     <div style="width:100px">
</div> 
La idea seria que los 4 div queden alineados automaticamente con un espacio de 10px cada uno, llenando completamente el div contenedor. He tratado de hacerlo con float, inline-block y hasta con tablas, pero siempre me deja el espacio sobrante a la derecha y no hay manera de que este quede dividido automaticamente en los espacios entre los div. Obviamente podria simplemente ponerle un margen de 10px a la derecha de cada div y eliminarlo en el ultimo, pero quiero hacerlo en una pagina dinamica donde el usuario pueda elegir la cantidad de divs que se van a mostrar, por lo que esa solucion ya no me sirve.

Alguna idea? Gracias
  #2 (permalink)  
Antiguo 21/01/2012, 21:32
Avatar de madhatterdef  
Fecha de Ingreso: diciembre-2011
Ubicación: argentina
Mensajes: 213
Antigüedad: 12 años, 4 meses
Puntos: 59
Respuesta: Alinear divs exactamente

se me ocurre que podrías poner div de 10px de ancho entremedio dependiendo de lo que definas como dinámico puede servir

a que te referís como dinámico(que, con que lenguaje y cómo)???
al responder eso seguro te puedo dar una respuesta mejor
  #3 (permalink)  
Antiguo 21/01/2012, 21:59
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 2 meses
Puntos: 306
Respuesta: Alinear divs exactamente

Hola
Lo mejor es que muestres como lo estas o estabas tratando de lograr. Recuerda, el foro es de ayuda, y para eso que mejor que poner el código con el cual has tenido problemas.
Tanto float como inline-block, o tablas requieren de soluciones particulares, además de que es necesario ver si le has puesto margin, padding, border, etc, todas propiedades que afectan el ancho de los elementos.
Saludos

PD:
Cita:
se me ocurre que podrías poner div de 10px de ancho entremedio
Un div para nada semántico ni necesario, al menos desde mi punto de vista.

Saludos 2
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #4 (permalink)  
Antiguo 21/01/2012, 22:19
Avatar de madhatterdef  
Fecha de Ingreso: diciembre-2011
Ubicación: argentina
Mensajes: 213
Antigüedad: 12 años, 4 meses
Puntos: 59
Respuesta: Alinear divs exactamente

el div era una alternativa al margin que no quiere usar
  #5 (permalink)  
Antiguo 21/01/2012, 22:28
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 2 meses
Puntos: 306
Respuesta: Alinear divs exactamente

Así lo había entendido también madhatterdef, como una alternativa, pero me parece que es mejor hacerle entender que para algo están esas propiedades.

Ahora, si es dinámico, no veo el problema de poder controlar que el último div tenga margin-right:0px, mientras el resto tenga un margin-right:10px; (claro desde el script php o asp)
Pero son suposiciones ya que no muestra el código que está aplicando.


Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #6 (permalink)  
Antiguo 21/01/2012, 22:37
Avatar de madhatterdef  
Fecha de Ingreso: diciembre-2011
Ubicación: argentina
Mensajes: 213
Antigüedad: 12 años, 4 meses
Puntos: 59
Respuesta: Alinear divs exactamente

yo pensé en lo mismo a eso iba la pregunta que hice
coincido mejor a esperar el código
  #7 (permalink)  
Antiguo 07/03/2012, 11:24
 
Fecha de Ingreso: marzo-2009
Ubicación: Sancti Spíritus, CUBA
Mensajes: 150
Antigüedad: 15 años, 1 mes
Puntos: 7
Respuesta: Alinear divs exactamente

Bueno yo lo hago con jQuery, con una sola linea, ejemplo si tienes esto

Código HTML:
Ver original
  1. <ul>
  2.      <li></li>
  3.      <li></li>
  4.      <li></li>
  5.      <li></li>
  6.      <li></li>
  7.  
  8. </ul>

con un estilo como este:

Código CSS:
Ver original
  1. ul li{
  2.     float:left;
  3.     margin-right:10px;
  4. }

Y tienes miedo con el utlimo <li>, proque este tiene un margen a la derecha, pues usa esto:

Código CSS:
Ver original
  1. ul li{
  2.     float:left;
  3.     margin-right:10px;
  4. }
  5. ul li.last{
  6.     margin-right:0;
  7. }

Y con jQuery

Código Javascript:
Ver original
  1. $(function(){
  2.       $("ul li:last").attr("class","last");
  3. })

ESO ES TODO, mucha suerte! att: [email protected]

Etiquetas: alinear, contenido, divs
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:40.