[Resuelto] [JQuery]\/(Ayuda) - Como hacer un Listview Horizontal

[Brian1511]

Hola a todos.
Mi duda es como puedo hacer este estilo de ListView para mi web mobil.

El caso es que muestro productos en una bd y uso el While de Php para que por cada producto en la tabla se cree un list view con los productos. Eso lo tengo listo pero como hago que los productos se muestren en este estilo?:



Saludo y Gracias de antemano!

[ZeroVzla]

Hola,

Yo pondría un div contenedor o como se le conoce "wrapper" y dentro cada elemento en un div que tenga la propiedad float: left; y le pones margenes a la derecha (y otros a los demás lados), así todos los elementos serán cargados hacia la izquierda independientemente del tamaño de la pantalla, es decir, entre más ancha más elementos aparece.

Saludos!!...

[#!drvy]

CSS

Código (css) [Seleccionar] Expandir

.item {
    border: 1px solid #999;
    border-radius: 5px;
    box-shadow: 0px 0px 5px #ccc;
    display: inline-block;
    font-size: 0.8em;
    margin:5px;
    max-width: 200px;
}


    /* resetear */
    .item * { margin: 0; padding: 0; }

    .item .image, .item .author { padding: 5px; }

    /* Estilo de la imagen */
    .item .image img {
        border-radius: 3px;
        height: 170px;
        width: 170px;
    }

    /* Estilo del autor */
    .item .author { display: table; }

        /* Posicionamiento de  titulo, imagen y pefil del autor. */
        .item .author .author-img, .item .author .author-info {
            display: table-cell;
            padding:2px 3px 2px 0px;
            vertical-align: top;
        }

        /* Estilo imagen del autor */
        .item .author .author-img { }

            .item .author .author-img img {
                border-radius: 3px;
                height: 42px;
                width: 42px;
            }

        /* Estilo infomracion autor */
        .item .author .author-info {
            line-height: 1.7em;
            padding-left: 4px;
        }

            /* Estilo titulo de la imagen */
            .item .author .author-info .title {
                display: block;
                font-weight: 700;
                font-size: 1.2em;
            }

            /* Estilo nombre autor */
            .item .author .author-info .profile a {
                color: #069;
                font-weight: 700;
                text-decoration: underline;
            }

    /* Estilo comentarios */
    .item .comments {
        border-top: 1px solid #999;
        color: #444;
        padding: 5px;
        text-align: center;
    }

HTML

Código (html4strict) [Seleccionar] Expandir

<!-- Aqui tu while -->

<div class='item'>

    <div class='image'>
        <img src='' alt=''>
    </div>

    <div class='author'>

        <div class='author-img'>
            <img src='' alt=''>
        </div>

        <div class='author-info'>
            <span class='title'></span>
            <span class='profile'>by <a href='#'></a>.</span>
        </div>

    </div>

    <div class='comments'>
        <span>X comments, X likes</span>
    </div>

</div>

<!-- Termina el while -->



DEMO: http://jsfiddle.net/drvy/3wxaz9hc/1/

Los títulos los puedes cortar con CSS o con PHP aunque con CSS es liarse demasiado. Los valores del height/width de las imágenes yo las cambiaría dependiendo de la resolución pero para que quede uniforme, me aseguraría de que siempre tengan el mismo height y el mismo width.

Saludos

[Brian1511]

Wow #!drvy la verdad que te lo agradezco muchisimo amigo, me volvi loco buscando esto!
Muchas gracias me sirvio a la perfeccion!

Saludos!