Foros del Web » Creando para Internet » CSS »

colocar tres contenedores dentro de uno

Estas en el tema de colocar tres contenedores dentro de uno en el foro de CSS en Foros del Web. Hola, cual seria la manera mas correcta de colocar tres contenedores dentro de uno centrado y que se coloquen bien distribuidos, con espacios entre ellos? ...
  #1 (permalink)  
Antiguo 08/09/2014, 06:38
Avatar de noctovision  
Fecha de Ingreso: marzo-2012
Mensajes: 28
Antigüedad: 12 años
Puntos: 1
colocar tres contenedores dentro de uno

Hola, cual seria la manera mas correcta de colocar tres contenedores dentro de uno centrado y que se coloquen bien distribuidos, con espacios entre ellos?

http://grab.by/A5Ma

y es lo que tengo:

http://www.yacobi.pl/highschool/

Gracias de antemano
  #2 (permalink)  
Antiguo 08/09/2014, 10:41
 
Fecha de Ingreso: abril-2014
Ubicación: 3 metros sobre la casa de abajo
Mensajes: 40
Antigüedad: 9 años, 11 meses
Puntos: 6
Respuesta: colocar tres contenedores dentro de uno

Yo lo hago así:

NOTA: no lo estoy probando, es apenas algo que recuerdo.

Código HTML:
Ver original
  1. <div id="contenedor">
  2. <div class="distribucion "></div>
  3. <div class="distribucion "></div>
  4. <div class="distribucion "></div>
  5. </div>

Código CSS:
Ver original
  1. #contenedor {
  2. /* formato para el contenedor principal (el que contendrá a los otros 3) */
  3. vertical-align: top;
  4. }
  5.  
  6. .distribucion {
  7. /* Formato para los 3 contenedores */
  8. display: inline-block;
  9. }


Con esto los 3 contenedores deberían quedar en el top del contenedor principal, y si a esos 3 contenedores les colocas un width que no se pase del width del contenedor principal, estos quedarán alineados uno al lado del otro en el top del contenedor principal.
__________________
Vivir y aprender... ojalá pudiera resistir por lo menos 150 años.

Última edición por webosiris; 08/09/2014 a las 23:53
  #3 (permalink)  
Antiguo 09/09/2014, 00:02
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.725
Antigüedad: 22 años, 1 mes
Puntos: 998
Respuesta: colocar tres contenedores dentro de uno

Hola, lo que dice Luminis no te va a funcionar, honestamente creo que no entendió bien la pregunta.

lo que tu quieres hay varias formas de hacerlo, pero lo más sencillo es darles un margin y al 3° elemento sacárslo. Algo así:

Código CSS:
Ver original
  1. .services li{
  2. width:30%;
  3. float:left;
  4. margin-right:5%;
  5. }
  6. .services li:nth-child(3n){
  7. margin-right:0;
  8. }
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #4 (permalink)  
Antiguo 09/09/2014, 01:55
 
Fecha de Ingreso: abril-2014
Ubicación: 3 metros sobre la casa de abajo
Mensajes: 40
Antigüedad: 9 años, 11 meses
Puntos: 6
Respuesta: colocar tres contenedores dentro de uno

Bueno yo entendí que quería un contenedor (centrado) con otros 3 dentro y distribuídos:

Hice esto a ver si es lo que busca:



Código HTML:
Ver original
  1.     <div></div>
  2.     <div></div>
  3.     <div></div>

Código CSS:
Ver original
  1. section {
  2.     width: 900px;
  3.     height: 600px;
  4.     background-color: #191919;
  5.     margin: 10% auto auto;
  6.     text-align: center;
  7. }
  8.  
  9. div {
  10.     width: 250px;
  11.     height: 250px;
  12.     background-color: red;
  13.     display: inline-block;
  14.     margin-top: 20%;
  15. }
__________________
Vivir y aprender... ojalá pudiera resistir por lo menos 150 años.
  #5 (permalink)  
Antiguo 09/09/2014, 02:13
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.725
Antigüedad: 22 años, 1 mes
Puntos: 998
Respuesta: colocar tres contenedores dentro de uno

Luminis, el código de tu segundo mensaje evidentemente está más trabajado y es diferente que el de tu primer mensaje, pero aún así no es lo que noctovision busca, mira el ejemplo que puso, la distancia entre los 3 bloques es mucho mayor que un pequeño espacio como el tuyo (el espacio de tu ejemplo es provocado por como funciona el block-inline, pero no puede ser personalizado) y para eso es necesario usar margin (pero si no se lo sacas al último elemento, dejan de estar centrados)

Además que de la forma que muestro en mi mensaje, la única medida fija que hay que dar es la del contenedor, al estar todo lo demás en porcentajes los bloques siempre ocupan 1/3 del contenedor, lo que hace que sea una solución mucho más flexible.
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -

Etiquetas: contenedores, tres
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 00:18.