1

Estoy aprendiendo y necesito dinámicamente cargar varias imágenes, puede ser 1 o 50 , en el ejemplo hice un bucle corto con varios divs flotantes para explicar mi problema. Necesito que los divs se vean alineados con el mismo espacio exacto unos de otros , los divs tienen ancho y alto fijos ( cargaré imagenes dentro) y la idea es que si achico el browser se recalculen los espacios o margenes horizontales entre ellos, o sea entren los que quepan , queden centrados , y que los que no quepan pasen a una segunda linea dentro del contenedor, alineados igual que la primera. Quizás no es la forma y deba utilizar jquery o javascript, necesitaría un ejemplo para arrancar, estudiarlo y adaptarlo.

El código para index.php:

<html>
	<head>
		<LINK REL="stylesheet" TYPE="text/css" HREF="css/estilo.css">
	</head>
	<body>
		<div id="contenedor">
		<?php 
		for ($i = 1; $i <= 10; $i++) {
    	?>
    		<div class="marcos">
    			<div class="fotos"></div>
    		</div>
		<?php
			}
		?>
		</div>

	</body>
</html>

la hoja de estilos :

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

body {
	text-align: center;
	margin: 0 auto;
	overflow: auto;
}

#contenedor {
	max-width: 910px;
	min-width: 240px;
	text-align: center;
	margin: 0 auto;
	border: 1px solid blue;
	overflow: hidden;
}

.marcos {
	float:left;
	width: 180px;
	height: 220px;
	border: 1px solid black;
	overflow: hidden;
}

.fotos {
	text-align: center;	
	margin: 9px 9px;
	width: 160px;
	height: 200px;
	border: 1px solid orange;
}

2 respuestas 2

2

El uso de flexbox puede servirte. Aquí hay un Fiddle con unas modificaciones que hice a tu código.

En resumen, modifiqué el CSS de #contenedor

#contenedor {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  /* ... Los demás atributos se mantienen igual */
}

En CSS-Tricks hay información sobre flexbox, con esquemas y ejemplos. Funciona bien en navegadores modernos, como se detalla en CanIUse.com.

0

introducir la descripción de la imagen aquí

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

body {
  margin: 0 auto;
}

#contenedor {
  max-width: 700px;
  min-width: 240px;
  border: 1px solid blue;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

.marcos {
  width: 180px;
  height: 220px;
  border: 1px solid red;
}

.fotos {
  margin: 9px 9px;
  width: 160px;
  height: 200px;
  border: 1px solid orange;
}
 <div id="contenedor">
    <?php 
         for($i=1; $i<10; $i++){
          $html ='
                <div class="marcos">
                  <div class="fotos"></div>
                </div>';
           echo $html;
          }
         
      ?>
  </div>

Asi se ejecutara

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.