¿Cómo mostrar imágenes con PHP y MySql mostrado con una hoja de estilo?

Lo que quiero es que me muestre la imagen con unos div pero no logro que se me salga en fila de 3, sino que me lo muestra en una sola columna.

introducir la descripción de la imagen aquí

Me sale de esa manera y la quiero de esta forma...

introducir la descripción de la imagen aquí

Código HTML:




Código PHP:

';
    echo '
'; echo'

3
задан 05.12.2016, 19:14
4 ответа

Я оставляю тебе полный пример, как он мог бы оставаться.

Во-первых ты используешь mysql, который остался освобожденным и для этого deberГ, - чтобы использовать mysqli, или лично я советую тебе готовые решения.

Ручное решение приготовило () :


Пример:

Лист стилей CSS:

/* Eliminamos flujo flotante (CSS3). */
.holder-clear {         
    height:   1%; 
    width: 100%;  
    overflow: hidden;    
}

/* Reglas estandares para nuestras cajas flotantes. */
.col2, .col3, .col4 { 
    float:left;
    width: 100%;    
}

/* 2 cajas flotantes */
.col2 { max-width: 50%; }

/* 3 cajas flotantes */
.col3 { max-width: 33.3%; } 

 /* 4 cajas flotantes */
.col4 { max-width: 25%; }

.padding { padding: 1rem; }

CГіdigo PHP:

<?php
    //Conexión MySQL
    require_once'tu_conexion.php';

    //Sentencia
    $sql=  mysqli_query($tu_conexion, "SELECT * FROM repuesto");
    //Si existe registros en la Base de datos.
    if (mysqli_num_rows($sql) > 0) {

        //Caja, para añadir cajas flotantes (No puede ir dentro de while, si no en cada registro te elimina el flujo flotante de tus caja).
        echo "<div class=holder-clear>";

        while($res= mysqli_fetch_array($sql)) {

            //Es importante añadir la caja flotante en tu bucle while.
            echo "          
                <div class='col3 padding'>

                    <img src=turuta/".$res['imagen_repuesto']." alt='imagen (.jpg)' />

                    <h2>".$res['nombre_repuesto']."</h2>

                    <p>".$res['precio_repuesto']."</p>

                    <div>
                        ".$res['descripcion_repuesto']."
                    </div>

                    <a class=button href=descripcion.html>Leer más</a>
                </div>

            ";

        } 

        echo "</div>";//Fin eliminación cajas flotantes.

    } else { //Caso falso.
        echo "0 registros encontrados";
    }
    //Cerramos conexión despues de no utilizarlo.
    mysqli_close($tu_conexion);

?>
2
ответ дан 24.11.2019, 12:15
  • 1
    я ayudarí эксперт, который должен понимать твой có я говорю, хочу сделать то же самое, но он у меня не остается, я начинающий, но хочу изучить. Привет. – Luis Chimal 28.08.2018, 06:25
  • 2
    @LuisChimal, что исходит из кода, ты не понимаешь PHP или CSS? – D.Bulten 28.08.2018, 10:32

Это вещь Css. Это мочь оставаться так:

while($res=  mysql_fetch_array($sql)){
   echo '<div class="col">';
   //Todo el dom de las imgs 
   echo '</div>';
}

Где css:

.col{
  margin: 1px;
  padding: 10px;
  width:33%;
}

width 33 %, потому что он возьмет третью часть экрана, были каковыми будьте Ваше разрешение, и так у тебя может быть 3 колонны.

Это может решать проблему, которую ты выдвигаешь в твоем вопросе.

Заметь: Новая проблема, которой ты будешь противостоять себе, состоит в том, что ты должен делать это responsivo для smarthphones и tablets. Я рекомендую тебе много лучше использовать Bootstrap, это очень просто использования.

1
ответ дан 24.11.2019, 12:15

простым способом:

article
{
    float: left;
    width: 30%;
}
1
ответ дан 24.11.2019, 12:15

Я это решил добавляя этот css:

CSS:

.col{
  float: left;
  margin: 1px;
  padding: 10px;
  width:25%;
}

PHP:

<?php
require_once 'clases/conexion.php';
?>    
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/styleimag.css" type="text/css" media="screen">
<title></title>
</head>
<body>  
<?php                                           

$sql=  mysql_query("SELECT * FROM repuesto");    

while($res=  mysql_fetch_array($sql)){    

    echo '<div class="col">';    
    echo '<img src="../Administrador/pages/RepuestoCRUD/'.$res["imagen_repuesto"].'"width="230" heigth="220">';
    echo'<h6>'.$res["nombre_repuesto"].'</h6>';
    echo'<h6>'.$res["precio_repuesto"].'</h6>';
    echo'<p class="p2">'.$res["descripcion_repuesto"].'</p>';
    echo'<a class="button" href="descripcion.html">Leer Mas</a>';

    //Todo el dom de las imgs
    echo '</div>';
}                                                   
?>    
</body>
</html>
0
ответ дан 24.11.2019, 12:15