2

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:

<!--div class="wrapper margin-bot">
    <article class="col-1">
        <div class="prev-indent-bot">
            <figure class="img-border"><a href="#"><img src="images/page1-img13.jpg" alt="" /></a></figure>
            <div class="clear"></div>
        </div>
        <h6>Luz frontal izquierda</h6>
        <h6>$25.00</h6>
        <p class="p2">Luz para hondas frontal izquierda, se encuentra nueva en empaque, con optimas condiciones venta por...</p>
        <a class="button" href="descripcion.html">Leer Mas</a>
    </article>
    <article class="col-1">
        <div class="prev-indent-bot">
            <figure class="img-border"><a href="#"><img src="images/page1-img11.jpg" alt="" /></a></figure>
            <div class="clear"></div>
        </div>
        <h6>Radiador</h6>
        <h6>$47.00</h6>
        <p class="p2">Venta de radiador usado, se encuentra en buenas condiciones y optimo para su manipulacion.</p>
        <a class="button" href="descripcion.html">Leer Mas</a>
    </article>
    <article class="col-2">
        <div class="prev-indent-bot">
            <figure class="img-border"><a href="#"><img src="images/page2-img2.png" alt="" /></a></figure>
            <div class="clear"></div>
        </div>
        <h6>Llantas</h6>
        <h6>$45.00 a $70.00</h6>
        <p class="p2">Venta de llantas al mayoreo y minoreo, de todo tamaño, nueva y usada a disposicion.</p>
        <a class="button" href="descripcion.html">Leer Mas</a>
    </article>
</div-->

<!--div class="wrapper">
    <article class="col-1">
        <div class="prev-indent-bot">
            <figure class="img-border"><a href="#"><img src="images/page2-img1.png" alt="" /></a></figure>
            <div class="clear"></div>
        </div>
        <h6>Accesorios</h6>
        <h6>Precios Variados</h6>
        <p class="p2">Venta de gran cantidad de accesorios para todo tipo de vehiculo, tanto usados como nuevos.</p>
        <a class="button" href="descripcion.html">Leer Mas</a>
    </article>
    <article class="col-1">
        <div class="prev-indent-bot">
            <figure class="img-border"><a href="#"><img src="images/amortiguador.jpg" alt="" /></a></figure>
            <div class="clear"></div>
        </div>
        <h6>Amortiguador</h6>
        <h6>$42.00</h6>
        <p class="p2">Venta de un amortiguador nuevo, en buen estado y con su presentacion de originalidad..</p>
        <a class="button" href="descripcion.html">Leer Mas</a>
    </article>
    <article class="col-2">
        <div class="prev-indent-bot">
            <figure class="img-border"><a href="#"><img src="images/velocidades.jpg" alt="" /></a></figure>
            <div class="clear"></div>
        </div>
        <h6>Caja de velocidades</h6>
        <h6>$250.00</h6>
        <p class="p2">En venta caja de velocidades usada, se encuentra en buenas condiciones para su uso, 1 año de uso con..</p>
        <a class="button" href="descripcion.html">Leer Mas</a>
    </article>
</div-->

Código PHP:

<?php
    echo '<div class="wrapper margin-bot">';
    echo '<figure class="img-border"><a href="descripcion.html">';
    echo'<article class="col-1">';
    echo'<div class="prev-indent-bot">';
    echo'<article class="col-1">';
    $sql=  mysql_query("SELECT * FROM repuesto");

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

        echo'<div class="prev-indent-bot">';
        echo'<figure class="img-border"><a href="descripcion.html">';
        echo '<img src="../Administrador/pages/RepuestoCRUD/'.$res["imagen_repuesto"].'"width="230" heigth="220">';
        echo'<img src="" alt="" /></a></figure>';
        echo'<div class="clear"></div>';
        echo '</div>';
        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>';
        echo'</article>';
    }
?>
6
  • podrías añadir el código html?
    – Rene Limon
    el 5 dic. 2016 a las 16:39
  • con gusto un momento @ReneLimon el 5 dic. 2016 a las 16:42
  • @AlexanderArias :) Asegúrate de agregar el código que has trabajado cuando preguntes en StackOverflow :) Un pequeño consejo para evitar esas personas tipo ... "DOWNVOTE, DOWNVOTE EVERYWHERE". el 5 dic. 2016 a las 18:18
  • 1
    soy nuevo aca casi no se nada de StackOverflow el 5 dic. 2016 a las 18:20
  • @AlexanderArias No te preocupes :) Sólo es un consejo el 5 dic. 2016 a las 18:22

4 respuestas 4

2

Te dejo un ejemplo completo como podria quedar.

En primer lugar estas utilizando mysql que ha quedado absuelto y para ello debería utilizar mysqli, o personalmente te aconsejo sentencias preparadas.

Manual sentencia prepare():


Ejemplo:

Hoja de estilos 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
  • me ayudarías a entender tu código, quiero hacer lo mismo pero no me queda, soy novato pero quiero aprender. Saludos. el 28 ago. 2018 a las 3:25
  • @LuisChimal que parte del codigo no entiendes PHP o CSS?
    – D.Bulten
    el 28 ago. 2018 a las 7:32
1

Esto es cosa de Css. Podría quedar así:

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

Donde css:

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

El width 33% porque tomará una tercera parte de la pantalla, sea cual sea su resolución, y así puedes tener 3 columnas.

Esto puede solucionar el problema que planteas en tu pregunta.

Nota: El problema nuevo que te enfrentarás es que debes hacerlo responsivo para smarthphones y tablets. Te recomiendo mucho que mejor uses Bootstrap , es muy sencillo de usar.

1

de una manera sencilla:

article
{
    float: left;
    width: 30%;
}
0

Lo he resuelto agregando este 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

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.