Cómo separar fotos de diferentes tamaños en secciones independientes en una web

  • Autor Autor migaso
  • Fecha de inicio Fecha de inicio
M

migaso

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola, tengo varias fotos en una web agrupadas en dos tamaños. Hay unas cinco fotos de un tamaño menor (120x60px) y debajo las fotos de mayor tamaño (150x100px). Lo que pasa es que cuando quito una foto de menor tamaño se me sube una de mayor tamaño a la fila, y queda mal.

Quisiera saber que tengo que poner para dividir cada fila de fotos, para que las de menor tamaño no se mezclen con las de mayor, que sean independientes.

Ejemplo: a(foto menor) b(foto mayor)
aaaaa
bbbbb

Si borro una de la fila de a, queda así:
aaaab
bbbb

y yo quiero que quede así:
aaaa
bbbbb
 
Insertar CODE, HTML o PHP:
<div>aaaaaaaaa</div>
<div>bbbbbbbbb</div>
 
Lo que puedes hacer es definir una caja fila que llevara en su interior las fotos de la fila, y dentro de la fila una caja por foto de manera que le dices flotar a la izquierda a cada caja de foto. En css defines las propiedades de las cajas. Algo como esto.

<div class="Fila">
<div class="Foto">
<img src="imagenes/Coche1.jpg" border="0" height="1048" width="1547">
</div>
<div class="Foto">
<img src="imagenes/Coche2.jpg" border="0" height="1048" width="1547">
</div>
<div class="Foto">
<img src="imagenes/Coche3.jpg" border="0" height="1048" width="1547">
</div>
<div class="Foto">
<img src="imagenes/Coche4.jpg" border="0" height="1048" width="1547">
</div>
</div>

<div class="Fila">
<div class="Foto">
<img src="imagenes/casa1.jpg" border="0" height="1048" width="1547">
</div>
<div class="Foto">
<img src="imagenes/casa2.jpg" border="0" height="1048" width="1547">
</div>
<div class="Foto">
<img src="imagenes/casa3.jpg" border="0" height="1048" width="1547">
</div>
<div class="Foto">
<img src="imagenes/casa4.jpg" border="0" height="1048" width="1547">
</div>
</div>
 
Atrás
Arriba