Mostrar imagenes en 4 columnas

[kimmy]

Hola amigos. Tengo un código que me busca unas imagenes y las muestra, pero quisiera mostrarlas de a 4 por columnas y que luego venga la otra fila y se muestren 4 dependiendo de las que esten guardadas. Este es el código que tengo:

Código PHP:

$ruta = "images/galerias/"; // Indicar ruta
   $filehandle = opendir($ruta); // Abrir archivos
    while ($file = readdir($filehandle)) {
       if ($file != "." && $file != "..") {
                $tamanyo = GetImageSize($ruta . $file);
                echo "    
               <div id=\"borde\">
               <p><img src='$ruta$file' $tamanyo[15]><br></p>\n</div><br>";
           } 
        } 
    closedir($filehandle); // Fin lectura archivos
 

No se como decirle al código que cuando llegue la quinta imagen salte a otra linea o fila.

????

[ocp001a]

con un contador:

Código PHP:

$col=1;
    while ($file = readdir($filehandle)) {
       if ($file != "." && $file != "..") {
                $tamanyo = GetImageSize($ruta . $file);
                echo "    
               <div id=\"borde\">
               <p><img src='$ruta$file' $tamanyo[15]><br></p>\n</div>";
               if($col==4){
                    echo '<br/>';
                    $col=0;
               }
               $col++;
           } 
        }
 

[kimmy]

ocp001a, gracias por tu atención pero lo probé y no hace nada ???

[ocp001a]

¿A qué te refieres, a que no funciona (ignora las columnbas) o a que deja de funcionar?

[kimmy]

sigue funcionando pero ignora las columnas

[ocp001a]

Bueno, quizá sea problema de css, habría que ver si tu <br/> hace o no un salto de linea, o si necesitas colocar más de uno para que se note el salto

[kimmy]

El problema es que se muestran todas hacia abajo. La idea es tener columnas y filas pero no se como armarlas porque ahora simplemente tengo un div que me hace unos recuadros. Este es el div:

Código HTML:

#borde{ border: 1px solid #000000;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
padding: 10px;
width:120px;
text-align:center;
}
 

Estoy un poco perdida

[ocp001a]

entonces sí es problema de css. si al css de tu div le asignas float:left; creo que debería funcionar.

[kimmy]

No funciona tampoco con el float. Creo que lo que pasa es que no estoy haciendo la tabla. Lo puse ahora así pero tampoco lo hace:

Código PHP:

$ruta = "images/galerias/"; // Indicar ruta
        $filehandle = opendir($ruta); // Abrir archivos
        $col=1;
        echo '<table border=\"1\">';
            while ($file = readdir($filehandle)) {
                if ($file != "." && $file != "..") {
                $tamanyo = GetImageSize($ruta . $file);
                echo " 
                <tr><td><div id=\"titulo_recuadros\">
                   ciudad<br>
                   </div>
                
  
                <div id=\"borde\">
                <p>
                <img src='$ruta$file' $tamanyo><br>
                $nombre_posada
                </p>\n
                </div></td></tr><br>";
                if($col==4){
                        echo '<br/>';
                        $col=0;
                   }
                   $col++;
               }
            }
            echo '</table>';
closedir($filehandle); // Fin lectura archivos
 

???

[kimmy]

Y veo que no toma lo del contador porque no sabe que la variable $col se refiere a las columnas de la tabla

[ocp001a]

Desde luego que no lo "sabe"....
Revisando más detenidamente tu código, al div en ningún lugar le indicas que use la clase del css. No necesitas manejar una tabla para crear las columnas, aunque tampoco es que no se pueda. Lo que sí necesitas es conocer mejor el html

[IsaBelM]

tu problema se puede solucionar usando la pseudo-clase nth-child() de css3

[kimmy]

IsaBelM lo que quise decir de que "obviamente" no lo sabe es porque no estamos definiendo quien es $col (es decir no hay nada que indique que es una columna).

Por otra parte, el enlace que me indicaste de pseudo-clase nth-child() de css3 no es lo que creo se ajusta a lo que estoy haciendo.

Pienso que se debe crear la estructura de la tabla para poder decirle que si encuentra tantas columnas entonces muestre las imagenes en la otra fila y asi sucesivamente....

Eso es lo que no se hacer. Encontré un ejemplo que creo puede servir pero no se como adaptarlo.

Código PHP:

<div style="width:500px"><!--Div Contenedor-->
<?
$totalCeldas = 20; #Dibujaré 20 items
for( $i = -1; ++$i < $totalCeldas; ){ #Un simple for de 0 a 20 en este caso?>
    <div style="width:100px; float:left; background-color:red">
        <?=$i;?>
            </div><!--Div Hijo -->
<? }?>
 

[IsaBelM]

la solución es css. añade tanto bloques como quieras

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
* {
margin:0;
padding:0;
position: relative;
}

html, body {
height: 100%;
font-family: garamond, serif;
font-size: 100%;
}

#contenedor {
background: #fe0;
width: 900px;
margin: 0 auto;
overflow: hidden;
}

#contenedor > div {
width: 140px;
height: 105px;
background: #cacaca;
float: left;
margin: 10px;
}

#contenedor > div:nth-child(4n) {
float:right;
background: red;
}

#contenedor > div:nth-child(4n-1) {
margin-left: 50px;
margin-right: 100px;
background: green;
}


#contenedor > div:nth-child(4n-2) {
margin-left: 100px;
margin-right: 50px;
background: pink;
}
</style>
</head>
<body>
<div id="contenedor" >
<div>FOTO1</div>
<div>FOTO2</div>
<div>FOTO3</div>
<div>FOTO4</div>
<div>FOTO5</div>
<div>FOTO6</div>
<div>FOTO7</div>
<div>FOTO8</div>
<div>FOTO9</div>
<div>FOTO10</div>
</div>
</body>
</html>

[kimmy]

Mil Gracias IsaBelM