Foros del Web » Creando para Internet » CSS »

distribuir N divs en una linia

Estas en el tema de distribuir N divs en una linia en el foro de CSS en Foros del Web. Quiero distribuir N divs en una linia y que me ocupen el 100% del ancho de la ventana. Los divs pueden tener diferente ancho segun ...
  #1 (permalink)  
Antiguo 07/01/2004, 11:55
 
Fecha de Ingreso: enero-2004
Mensajes: 235
Antigüedad: 13 años, 11 meses
Puntos: 0
Pregunta distribuir N divs en una linia

Quiero distribuir N divs en una linia y que me ocupen el 100% del ancho de la ventana.
Los divs pueden tener diferente ancho segun el texto que le pongas.

Esto es lo que tengo, que cómo ejemplo he puesto sólo 4 divs, pero tiene que funcionar por un número indefinido de divs:


I esto es lo que quiero conseguir:

Nota: tened en cuenta que tiene que servir para N divs.
Aqui teneis el código de ejemplo:
Cita:
<html>
<head>
<style>
div {float: left; border:1px solid; text-align: center; }
</style>
</head>
<body>

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
.......
<div>N</div>

</body>
</html>
Gracias por vuestra colaboración.
  #2 (permalink)  
Antiguo 08/01/2004, 08:05
Avatar de jercer  
Fecha de Ingreso: octubre-2003
Mensajes: 373
Antigüedad: 14 años, 1 mes
Puntos: 13
Mete los div en una tabla

<table width="100%">
<tr>
<td><div>1</div></td>
<td><div>2</div></td>
<td><div>n</div></td>
</tr>

y dales el estilo del width de los div al 100%
__________________
Jerónimo Cernuda
Wemaster de McAnam.com
  #3 (permalink)  
Antiguo 09/01/2004, 16:58
Avatar de Manoloweb  
Fecha de Ingreso: enero-2002
Ubicación: Monterrey
Mensajes: 2.454
Antigüedad: 15 años, 10 meses
Puntos: 5
Y por que no les defines un

display: inline;

Asi solo dependeras del ancho de la pagina, o del elemento contenedor, por ejemplo:

============
.contenedor {
position: relative;
width: 100%;
}

.segmento {
position: relative;
display: inline;
}
=============

<div class="contenedor">
<div class="segmento">1</div>
<div class="segmento">2</div>
<div class="segmento">3</div>
<div class="segmento">4</div>
<div class="segmento">N</div>
</div>


Ahora, si lo que quieres es que los "segmentos" se extiendan a todo lo ancho del "contenedor", entonces deberas hacerte de un poco de javascript (o PHP, ó ASP) para calcular el ancho de cada segmento, y aplicarselos dinamicamente.


Saludos!!
__________________
Manoloweb
  #4 (permalink)  
Antiguo 09/01/2004, 22:16
 
Fecha de Ingreso: enero-2004
Mensajes: 235
Antigüedad: 13 años, 11 meses
Puntos: 0
De acuerdo

Gracias a los dos, por vuestras consultas.

Creo que es mejor poner display:inline y definir un with en la propiedad style de cada div, ya que no quiero hacer palntilla interna dinamica, ya que lo tengo todo en una plantilla externa .css y siempre se cachea, y sólo se descarga una vez.

Muchas gracias.
  #5 (permalink)  
Antiguo 09/01/2004, 23:15
 
Fecha de Ingreso: enero-2004
Mensajes: 235
Antigüedad: 13 años, 11 meses
Puntos: 0
Ostia, lo de las trablas, ha funcionado a la primera, i sin tener que definir widths para cada div. I yo que lo queria hacer sin tablas, pues bueno.. al final tendre que hacer-lo con tablas. Suerte que no es para layout.

Un saludo.
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 08:20.