distribuir N divs en una linia

jmaribau · #1 (**permalink**) 07/01/2004, 11:55

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.

jercer · #2 (**permalink**) 08/01/2004, 08:05

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%

Manoloweb · #3 (**permalink**) 09/01/2004, 16:58

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!!

jmaribau · #4 (**permalink**) 09/01/2004, 22:16

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.

jmaribau · #5 (**permalink**) 09/01/2004, 23:15

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.