Foros del web, para los que viven de bits

Alejo18 · 10-may-2008, 10:56

Buenas como haría varios divs que esten en una sola linea y no se vayan para abajo

Al poner

Código HTML:

<DIV>
<div>10</div>
<div>20</div>
<div>30</div>
<div>40</div>
<div>50</div>
</DIV>

Se pone uno debajo de otro

Ahora si pruebo asi,

Código HTML:

<div>
  <div style="float:left">10</div>
  <div style="float:left">20</div>
  <div style="float:left">30</div>
  <div style="float:left">40</div>
  <div style="float:left">50</div>
</div>

Bien no se saltan los divs para abajo quedan en una sola linea, ahora la pregunta es si hay algun otro metodo para juntar todos esos divs sin tener que poner float:left, pero que queden en una sola linea, asi como lo hace <td></td> en tablas, gracias y saludos

Raulmmmm · 10-may-2008, 13:06

Al div que los contiene le puedes poner un id, por ejemplo contenedor:

Código HTML:

<div id="contenedor">
<div>10</div>
<div>20</div>
<div>30</div>
<div>40</div>
<div>50</div>
</div>

Y entre <head> y </head> puedes poner esto:

Código HTML:

<style>
#contenedor div{ float:left; }
</style>

Alejo18 · 10-may-2008, 14:09

Muchas gracias ya lo aplique una pregunta, pero si el contenedor mide 50px, como haria para que todos los divs de dentro se coloquen al centro o enmedio

asi como indica el rectangulo rojo

Lo unico que puedo hacer es ponerle padding- pero se hace muy dificil cuantos pixeles hay del inicio al enmedio y más si el contenedor es mas grande.

saludos y Gracias nuevamente.

Mikmoro · 10-may-2008, 15:53

Usando line-height: 30px; o los px que tú quieras.

No obstante, me da la sensación de que quieres tabular datos. Si es así, debes usar una tabla. Las tablas no se deben usar para posicionar elementos o maquetar, pero sí para tabular datos.

Mikel.

Raulmmmm · 11-may-2008, 02:29

Pues, tal como te dice Mikel, si el contenedor mide 50px de alto, basta con que le pongas un line-height de 50px. El CSS quedaría así:

Código HTML:

<style>
#contenedor{ height: 50px; line-height: 50px; }
#contenedor div{ float:left; }
</style>

10-may-2008, 10:56	#1 (permalink)
Alejo18 Fecha de Ingreso: abril-2008 Mensajes: 45	Varios DIV en una sola linea Buenas como haría varios divs que esten en una sola linea y no se vayan para abajo Al poner Código HTML: <DIV> <div>10</div> <div>20</div> <div>30</div> <div>40</div> <div>50</div> </DIV> Se pone uno debajo de otro Ahora si pruebo asi, Código HTML: <div> <div style="float:left">10</div> <div style="float:left">20</div> <div style="float:left">30</div> <div style="float:left">40</div> <div style="float:left">50</div> </div> Bien no se saltan los divs para abajo quedan en una sola linea, ahora la pregunta es si hay algun otro metodo para juntar todos esos divs sin tener que poner float:left, pero que queden en una sola linea, asi como lo hace <td></td> en tablas, gracias y saludos

10-may-2008, 13:06	#2 (permalink)
Raulmmmm Fecha de Ingreso: marzo-2007 Ubicación: En otro lugar que tú Mensajes: 1.271	Re: Varios DIV en una sola linea Al div que los contiene le puedes poner un id, por ejemplo contenedor: Código HTML: <div id="contenedor"> <div>10</div> <div>20</div> <div>30</div> <div>40</div> <div>50</div> </div> Y entre <head> y </head> puedes poner esto: Código HTML: <style> #contenedor div{ float:left; } </style>

10-may-2008, 14:09	#3 (permalink)
Alejo18 Fecha de Ingreso: abril-2008 Mensajes: 45	Re: Varios DIV en una sola linea Muchas gracias ya lo aplique una pregunta, pero si el contenedor mide 50px, como haria para que todos los divs de dentro se coloquen al centro o enmedio asi como indica el rectangulo rojo Lo unico que puedo hacer es ponerle padding- pero se hace muy dificil cuantos pixeles hay del inicio al enmedio y más si el contenedor es mas grande. saludos y Gracias nuevamente.

10-may-2008, 15:53	#4 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 2.861	Re: Varios DIV en una sola linea Usando line-height: 30px; o los px que tú quieras. No obstante, me da la sensación de que quieres tabular datos. Si es así, debes usar una tabla. Las tablas no se deben usar para posicionar elementos o maquetar, pero sí para tabular datos. Mikel.

11-may-2008, 02:29	#5 (permalink)
Raulmmmm Fecha de Ingreso: marzo-2007 Ubicación: En otro lugar que tú Mensajes: 1.271	Re: Varios DIV en una sola linea Pues, tal como te dice Mikel, si el contenedor mide 50px de alto, basta con que le pongas un line-height de 50px. El CSS quedaría así: Código HTML: <style> #contenedor{ height: 50px; line-height: 50px; } #contenedor div{ float:left; } </style>

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado