0

mi problema es el siguiente... Quiero mostrar las imágenes de mi DB en un página, mi idea era mostrarlas de 3 en 3 pero al ir insertando imágenes solo la primera linea me sale de 3 la segunda me muestra una y la tercera fila me muestra las 3 Aquí como se muestra

Aquí

Este es el código para mostrar las imagenes

 <?php
	include('conexion.php');
	$query = "SELECT * FROM imagenes";
	$resultado = $conexion->query($query);
			?>
      <div class="imagenes">
<?php while($row = $resultado->fetch_assoc()){ ?>
<ul class="productos">
<li><?php echo $row['nombre'];?></b> </br>
         <img height="200px" width="300px" src="./<?php echo $row['ruta_imagen']; ?>">
            <p><?php echo$row['descripcion'];?></p></li></ul>
            <?php
				}
	?>
</div>

Estos son los estilos

.imagenes{
	overflow:hidden;
	width:80%;
	height:100%;
}
 .imagenes ul.productos li{
	 float:left;
	 width:33%;
	 padding:30px;
	 height:100%;
	list-style:none;
	overflow:hidden;
}

ul.productos li img{
display: inline-block;
  width: 150px;
	text-decoration:none;

}

Si me pueden ayudar para que se puedan mostrar correctamente las imágenes por favor

4
  • 2
    Intenta sacar el ul fuera del while
    – alanfcm
    Commented el 20 ago. 2018 a las 21:25
  • Quieres decir que coloque el while despues del ul?
    – Eduardo
    Commented el 20 ago. 2018 a las 21:30
  • Si.............
    – alanfcm
    Commented el 20 ago. 2018 a las 21:32
  • no funciona compa solo se colocan de dos y eso que solo algunas
    – Eduardo
    Commented el 20 ago. 2018 a las 21:41

3 respuestas 3

1

Puedes lograr lo que quieres con css. Algo asi:

ul.productos li {
  display: inline-block;   
  width: 32%;
}
<ul class="productos">
<li>Prueba 1</li>
<li>Prueba 2</li>
<li>Prueba 3</li>
<li>Prueba 4</li>
<li>Prueba 5</li>
</ul>

Tambien te recomiendo que chequees Bootstrap

2
  • Si fueran imagenes ya insertadas si funciona pero como se van agregando deberian de acomodarse segun los estilos de css
    – Eduardo
    Commented el 20 ago. 2018 a las 22:01
  • Ya edite mi respuesta, intentalo asi.
    – alanfcm
    Commented el 20 ago. 2018 a las 22:50
0

Si, todo funciona muy bien con tu codigo PHP, Pero tienes varios errores. En tu while has dejado dentro el UL y debes dejarlo fuera. Tambien debes de usar CSS ya que es cuestion de estilos. La razón por la que te sucede esto, es porque hay productos con textos mas largos que otros e imagenes con tamaños diferentes entonces tu siguiente columna se ajusta en donde existe una columna menos larga por eso vez que en tu segunda fila solo se muestra 1

ul.productos li {
  display: inline-block;   
  width: 32%;
}
.caption-img-product{
 width:300px;
 height:200px;
 background-size:cover;
}
<ul class="productos">
 <li>Prueba 1</li>
 <li>Prueba 2</li>
 <li>Prueba 3</li>
 <li>Prueba 4</li>
 <li>Prueba 5</li>

 <?php
  include('conexion.php');
  $query = "SELECT * FROM imagenes";
  $resultado = $conexion->query($query);
 ?>
 <div class="imagenes">         
  <ul class="productos">
    <?php while($row = $resultado->fetch_assoc()){ ?>
     <li>
      <?php echo $row['nombre'];?>
        <div class="caption-img-product" style="background-image:url('./<?php echo $row['ruta_imagen']; ?>');" ></div>
          <p><?php echo$row['descripcion'];?></p>
      </li>
     <?php
       }
     ?>
  </ul>
</div>
6
  • oo ya veo, y sabes como hacer para que eso no suceda??? ya coloque el while fuera del <li> pero ahora solo me aparecen en forma de lista a pesar de los estlos
    – Eduardo
    Commented el 20 ago. 2018 a las 23:45
  • Si correcto ahora que ya tienes la lista, debes de usar ul.productos li { display: inline-block; width: 32%; } Esto alineara tu lista horizontalmente
    – Edgardofbg
    Commented el 21 ago. 2018 a las 0:11
  • Gracias bro, tenias razón con lo de los tamaños. Ya se acomodaron como quería, aunque no quedaron alineadas. Eso ya seria que las imágenes fueran todas del mismo tamaño, verdad?
    – Eduardo
    Commented el 21 ago. 2018 a las 0:20
  • Si correcto, lo que te recomiendo en este caso es usar las imagenes como background-image. te lo dejare en el codigo anterior. No olvides una manita arriba por la solución :)
    – Edgardofbg
    Commented el 21 ago. 2018 a las 0:38
  • Muchas gracias, le doy a la flechita arriba pero luego se quita, así que le di en la palomita xD. Gracias, por cierto,¿ en tu código?
    – Eduardo
    Commented el 21 ago. 2018 a las 0:42
0

Intenta cambiar tu codigo php/html por esto

<?php
    include('conexion.php');
    $query = "SELECT * FROM imagenes";
    $resultado = $conexion->query($query);
?>
<div class="imagenes">
    <ul class="productos">
        <?php while($row = $resultado->fetch_assoc()){ ?>
            <li class="imagenes">
                <?php echo $row['nombre'];?> </br>
                <img height="200px" width="300px" src="./<?php echo $row['ruta_imagen']; ?>">
                <p><?php echo$row['descripcion'];?></p>
            </li>
        <?php } ?>
    </ul>
</div>

y tus estilos por esto:

CSS

.imagenes{
    overflow:hidden;
    width:80%;
    height:100%;
    text-align:center
}
 .imagenes ul.productos li{
     width:30%;
     padding:30px;
     height:100%;
     list-style:none;
     overflow:hidden;
     text-align:left;
}

ul.productos li img{
    display: inline-block;
    width: 150px;
    text-decoration:none;
}
1
  • gracias, pero me muestra las imagenes en en cascada :(
    – Eduardo
    Commented el 20 ago. 2018 a las 23:38

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.