[SOLUCIONADO] DIV anidados ajustables

bandolera · #1 (**permalink**) 01/08/2013, 21:44

Hola. Cómo puedo hacer para tener un div y dentro de este tener 4 divs iguales alineados horizontalmente.
Si el navegador se reduce los de la derecha van bajando automáticamente.
Ya tengo los divs alineados pero como hago para que se ajusten automáticamente al navegador?

metacortex · #2 (**permalink**) 02/08/2013, 01:00

¿Algo así?

bandolera · #3 (**permalink**) 02/08/2013, 09:56

Cita:

Iniciado por metacortex

¿Algo así?

Algo así, solo que con un espacio entre ellas.
Y que cuando se reduzca el ancho del navegador, los divs de la derecha pasen automáticamente según el ancho a la parte inferior.

metacortex · #4 (**permalink**) 02/08/2013, 10:59

Para eso sólo tienes que cambiar el ancho de la clase .cuadro a una medida fija (como por ej. 200px) y darle unos 10px de margen derecho.

Puedes jugar un poco con el código haciendo clic en el enlace "Edit with JSFiddle" ubicado en la esquina derecha del cuadro del ejemplo.

bandolera · #5 (**permalink**) 02/08/2013, 16:46

Cita:

Iniciado por metacortex

Para eso sólo tienes que cambiar el ancho de la clase .cuadro a una medida fija (como por ej. 200px) y darle unos 10px de margen derecho.

Puedes jugar un poco con el código haciendo clic en el enlace "Edit with JSFiddle" ubicado en la esquina derecha del cuadro del ejemplo.

Gracias. voy a revisar con calma todo el fin de semana.

hackjose · #6 (**permalink**) 02/08/2013, 16:53

Solo para complementar

En principio los elementos div son elementos de bloque, por lo que seria un div por linea

Para que puedan estar en una sola linea puedes hacer 3 cosas

display:inline solo que aqui las propiedades width/height no sirven

display: inline-block aqui las propiedades width/height si sirven, solo que no todos los navegadores soportan inline-block

usar la propiedad float, asi los elementos se comportan como inline-block osea todos los div pueden estar en una linea y aparten son bloques(width/height sirven)

Cuando usas float a la hora de redimencionar la ventana los divs se van desplazando hacia abajo

Para evitar esto, hay que encerrar a los div en un container y este container debe tener medidas fijas osea width/height, asi el container siempre debe medir cierta anchura impidiendo que los div child bajen

espero haberte ayudado

salu2

bandolera · #7 (**permalink**) 23/01/2014, 16:12

Cita:

Iniciado por bandolera

Algo así, solo que con un espacio entre ellas.
Y que cuando se reduzca el ancho del navegador, los divs de la derecha pasen automáticamente según el ancho a la parte inferior.

Quiero que las cuatro cajas aparezcan centradas en la pantalla, pero aparecen al lado izquierdo.
Y cómo puedo hacer para eliminar el espacio entre ellas?
No quiero usar float y estoy usando inline-block.

Código HTML:

<!doctype html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="estilos.css"/>
</head>
<body>
	<div id="contenedor">
		<div class="cuadro"></div>
		<div class="cuadro"></div>
		<div class="cuadro"></div>
		<div class="cuadro"></div>
</div>
</body>
</html>

Código HTML:

*{
	border: 0;
	margin: 0;
	padding: 0;
}

#contenedor {
	display: block;
    margin: 0 auto;
    width: 90%;
 }

.cuadro {
    width: 100px;
    height: 150px;
    background: #efefef;
    border: 1px solid #ccc;
    display: inline-block;
}

Alguna sugerencia?
Gracias.

pzin · #8 (**permalink**) 23/01/2014, 16:23

Es lo que tiene usar inline-block. ¿Por qué no quieres usar float? No creo que exista respuesta racional a eso.

bandolera · #9 (**permalink**) 23/01/2014, 16:36

Cita:

Iniciado por pzin

Es lo que tiene usar inline-block. ¿Por qué no quieres usar float? No creo que exista respuesta racional a eso.

hhmm.... pero si estoy usando inline-block;

pzin · #10 (**permalink**) 23/01/2014, 16:50

Cita:

Iniciado por bandolera

hhmm.... pero si estoy usando inline-block;

Algo entendiste mal.

Digo que uses float, porque no existe razón para no hacerlo.

bandolera · #11 (**permalink**) 24/01/2014, 08:57

Cita:

Iniciado por pzin

Algo entendiste mal.

Digo que uses float, porque no existe razón para no hacerlo.

Leí en un manual de CSS3 que ya no debería utilizarse float en la maquetación.
Por eso.

jonni09lo · #12 (**permalink**) 24/01/2014, 09:02

Cita:

Iniciado por bandolera

Leí en un manual de CSS3 que ya no debería utilizarse float en la maquetación.
Por eso.

WDF!

te recomiendo que no sigas leyendo ese manual. Hasta que no exista un soporte completo de flex, la mejor forma de maquetar es usando float. Lo que NUNCA se debe de hacer es maquetar con PA (posiciones absolutas) eso no ha sido ni será nunca la manera de maquetar un sitio web.

Saludos

bandolera · #13 (**permalink**) 27/01/2014, 10:45

Cita:

Iniciado por jonni09lo

WDF!

te recomiendo que no sigas leyendo ese manual. Hasta que no exista un soporte completo de flex, la mejor forma de maquetar es usando float. Lo que NUNCA se debe de hacer es maquetar con PA (posiciones absolutas) eso no ha sido ni será nunca la manera de maquetar un sitio web.

Saludos

Yo no he dicho que esté maquetando con posiciones absolutas, solo pedí hacer lo mismo o parecido pero sin usar float nada más....

jonni09lo · #14 (**permalink**) 27/01/2014, 11:08

Cita:

Iniciado por bandolera

Yo no he dicho que esté maquetando con posiciones absolutas, solo pedí hacer lo mismo o parecido pero sin usar float nada más....

Jejeje solo te hacía dos aclaraciones. Como te dije no hay nada de malo en usar floats para maquetar ya que es la manera correcta de hacerlo.

Aún quieres trabajar sin floats? Lee esto que es lo que te dije que usaras (acuérdate que el soporte aún es muy pobre para flexbox)

Saludos