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;
}