Foros del Web » Creando para Internet » CSS »

Muchos divs alineados

Estas en el tema de Muchos divs alineados en el foro de CSS en Foros del Web. Hola, necesito que me den una mano, por favor: Tengo algo así: Código: <div class="items_container"> <div class="items"> <div class="item">blabla</div> <div class="item">blabla</div> <div class="item">blabla</div> <div class="item">blabla</div> ...
  #1 (permalink)  
Antiguo 06/10/2009, 23:12
Avatar de geq
geq
 
Fecha de Ingreso: agosto-2006
Ubicación: Rosario
Mensajes: 655
Antigüedad: 11 años, 4 meses
Puntos: 22
Pregunta Muchos divs alineados

Hola, necesito que me den una mano, por favor:

Tengo algo así:

Código:
<div class="items_container">
  <div class="items">
    <div class="item">blabla</div>
    <div class="item">blabla</div>
    <div class="item">blabla</div>
    <div class="item">blabla</div>
     ...
  </div>
</div>
CSS:

Código:
.items_container {
position: relative;
width: 200px;
height: 100px; /*valores de ejemplo*/
overflow: hidden;
}
.items {
position: absolute;
left: 0px;
height:100px;
}
.item {
float: left;
width: 100px;
height: 100px;
}
La idea es que .items se pueda desplazar dentro de .items_container (overflow hidden) para hacer un slide con javascript.
Pero ocurre que cuando hay muchos .item, se van hacia abajo, formando nuevas hileras.

¿Cómo puedo hacer que los .item queden estríctamente uno al lado del otro y que .items tome el ancho correspondiente?

Esto, sin darle width a .items.

Gracias, saludos.
  #2 (permalink)  
Antiguo 07/10/2009, 06:51
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Muchos divs alineados

".item" flotados, ".item" sin medidas (y mejor posicionado relativamente si no hay algún motivo que lo impida) y "overflow:auto".
Y el texto etiquetado (en "p", "span" o cualquier otra) con "display: block" y si es necesario con algún padding o margin.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 07/10/2009, 08:29
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Muchos divs alineados

Veamos.
- ¿Qué tamaño tiene un div (como tu <div class="items">) si no se le asigna ancho?: un 100% de la pantalla.
- ¿Qué ocurre cuando las cajas llenan el 100% del tamaño de su contenedor?: que la siguiente salta de línea (como pasaría con el texto, etc.).

Entonces: ¿se pueden alinear cajas en horizontal, sin indicar tamaño de ancho a su contenedor, y en un número que supere el ancho de la pantalla, sin que salten a la siguiente línea del flujo del documento?: NO. ¿Por qué habrían de hacerlo?

(juraría que no me equivoco, pero bueno, a ver si alguien me demuestra lo contrario, porque hablo de memoria [y de lógica]).
__________________
Visita mi nueva web idplus.org
  #4 (permalink)  
Antiguo 07/10/2009, 08:36
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Muchos divs alineados

Como podrás ver en este ejemplo, lo que hago es que la caja contenedor no tiene ancho y sí overflow: auto, pero eso es porque tiene dentro otra caja que sí lo tiene, si no, no se puede hacer que crezca en horizontal sin saltar de línea porque sí.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 07/10/2009, 08:52
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Muchos divs alineados

No. No hay equivocación.
Me quedé sólo con la segunda parte (div's alineados) y de forma incompleta (faltó un display: inline) y alguna cosilla más.

Otro ejemplo para que pueda ver y elegir (y curarse de esa incipiente divitis )

P.D.: hey! Dblers rescatado
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 07/10/2009, 09:23
Avatar de geq
geq
 
Fecha de Ingreso: agosto-2006
Ubicación: Rosario
Mensajes: 655
Antigüedad: 11 años, 4 meses
Puntos: 22
Respuesta: Muchos divs alineados

Vengo probando lo que dicen pero no funciona; de hecho lo que lo limita no es la pantalla, sino el div ".items_container". La idea sería que ".items" se ensanchara más alla de los límites, no sé porqué no sería posible si para eso existen las barras de desplazamiento.

En el último ejemplo de kseso? vi que el div que contiene las imagenes tiene un ancho definido, que es lo que no puedo hacer yo.

Muchas gracias, saludos
  #7 (permalink)  
Antiguo 07/10/2009, 09:43
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Muchos divs alineados

Cita:
Iniciado por geq Ver Mensaje
de hecho lo que lo limita no es la pantalla, sino el div ".items_container". La idea sería que ".items" se ensanchara más alla de los límites, no sé porqué no sería posible si para eso existen las barras de desplazamiento.
¿En serio has leído las respuestas y explicaciones que te hemos dado?
Cita:
Iniciado por geq Ver Mensaje
Vengo probando lo que dicen pero no funciona;
Discúlpame pero ¡¡¡cómo aborrezco estas afirmaciones!!! gratuitas. ¿Los ejemplos que hemos puesto no funcionan? ¿sabes si los has aplicado correctamente?

En fin, los siento, no puedo ayudarte.
Saludos.
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 07/10/2009, 09:58
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Muchos divs alineados

Cita:
Iniciado por Mikmoro Ver Mensaje
¿En serio has leído las respuestas y explicaciones que te hemos dado?
Cita:
Iniciado por geq Ver Mensaje
Vengo probando lo que dicen pero no funciona...
Discúlpame pero ¡¡¡cómo aborrezco estas afirmaciones!!! gratuitas. ¿Los ejemplos que hemos puesto no funcionan? ¿sabes si los has aplicado correctamente?

En fin, los siento, no puedo ayudarte.
Saludos.
+
Por mi parte sólo añadir que tienes dos opciones: o adaptarlo a lo que necesites (y no se qué es y cómo) o esperar que venga otro usuario y te lo de hecho.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
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 21:11.