0

Comunidad SO,

Como puedo ordenar mis resultados de la solicitud POST, para que se forme una tabla de imagenes y no queden por debajo del otro?

Donde recibo el resultado es un simple

<div id="resultados_ajax"></div>

La respuesta que envio en el archivo post es la siguiente:

<link rel="stylesheet" href="../post/css/estilos.css">
    <script src="../post/js/jquery-3.2.1.js"></script>
    <script src="../post/js/script.js"></script>

                <div class="product-item">
                    <img src="<?php echo $imagen; ?>" style="width: 75%;" alt="">
                    <a ><?php echo $cliente; ?></a>
                    <a style="border-color: gray;"><?php echo $rubro; ?></a>
                    <a><?php echo $producto; ?></a>
                </div>

introducir la descripción de la imagen aquí

3
  • ¿Ordenar o posicionar? Si es lo segundo, podrías agregar en CSS display:flex; al contenedor. Te recomiendo leer Conceptos básicos de Flex
    – Triby
    Commented el 19 ene. 2021 a las 16:53
  • @Triby Seria posicionar, ya que el css si contiene el atributo display:flex; Commented el 19 ene. 2021 a las 17:18
  • 2
    Entonces, por favor edita la pregunta y agrega tu código HTML + CSS, creando un ejemplo mínimo y reproducible para que podamos tratar de ayudarte.
    – Triby
    Commented el 19 ene. 2021 a las 17:22

1 respuesta 1

0

Aunque no incluyes el código con el cual obtienes las imágenes (¿vienen de una base de datos? ¿de un folder con imágenes?), en general la forma más sencilla es:

<div class="row">
    <?php foreach(): ?>    <-- Aqui recuperas las imágenes, for() o while()

        <div class="col-3">
            <!-- Aqui colocas la imágen -->
        </div>

    <?php endfor; ?>
</div>

Usar "col-3" te coloca 4 imágenes por fila ya que la rejilla tiene 12 columnas. Puedes usar "col-4" (tres imagenes por fila), "col-2" (seis imágenes), etc. La rejilla se encarga de crear una la fila nueva cuando se llena la fila actual.

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.