Estoy tratando de crear una galeria de miniaturas, pero no e podido que me quede bien ya que las fotos tienen diferentes anchos y altos (width y height) y las tengo con float left pero no me aplica esto es lo q me esta sucediendo (ver imagen):
el código css:
Código HTML :
.box{
padding: 5px;
background-color: #FFFFFF;
border: thin solid #CCCCCC;
margin: 5px 5px 5px 0;
float: left;
display: table-row-group;
}
.box img {
color: #333333;
border: thin solid #CCCCCC;
}
el código html:
Código :
if ($altofoto > $anchofoto )
$limitefoto= " height=\"" . "90" . "\"" ;
else
$limitefoto = " width=\"" . "100" . "\"" ;
?>
<? if ($conta==1){ ?>
<div class="box">
<a onmouseover="return overlib('<? echo $elemento; ?>', CAPTION, '<img src=images/loguito.gif>');" onmouseout="return nd();" href="<? echo $row3["fichero1"]; ?>" rel="lightbox[roadtrip]"><img src="<? echo $row3["fichero1"]; ?>" <?php echo $limitefoto ?> border="0" /> </a></div>
<? } ?>
<? if ($conta==2){ ?>
<div class="box">
<a onmouseover="return overlib('<? echo $elemento; ?>', CAPTION, '<img src=images/loguito.gif>');" onmouseout="return nd();" href="<? echo $row3["fichero1"]; ?>" rel="lightbox[roadtrip]"><img src="<? echo $row3["fichero1"]; ?>" <?php echo $limitefoto ?> border="0" /> </a></div>
<? } ?>
<? if ($conta==3){ ?>
<div class="box">
<a onmouseover="return overlib('<? echo $elemento; ?>', CAPTION, '<img src=images/loguito.gif>');" onmouseout="return nd();" href="<? echo $row3["fichero1"]; ?>" rel="lightbox[roadtrip]"><img src="<? echo $row3["fichero1"]; ?>" <?php echo $limitefoto ?> border="0" /> </a></div>
<? } ?>
<? if ($conta==4){ ?>
<div class="box">
<a onmouseover="return overlib('<? echo $elemento; ?>', CAPTION, '<img src=images/loguito.gif>');" onmouseout="return nd();" href="<? echo $row3["fichero1"]; ?>" rel="lightbox[roadtrip]"><img src="<? echo $row3["fichero1"]; ?>" <?php echo $limitefoto ?> border="0" /> </a></div>
<? $conta=0;?> <? }?>
<?
$conta=$conta+1;
}
if ($conta!=4) { ?>
<? }
?>
ayuda porfavor!!
