elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Los 10 CVE más críticos (peligrosos) de 2020


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Resuelto] [JQuery]\/(Ayuda) - Como hacer un Listview Horizontal
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Resuelto] [JQuery]\/(Ayuda) - Como hacer un Listview Horizontal  (Leído 2,803 veces)
Brian1511

Desconectado Desconectado

Mensajes: 268


¿Quien soy esa es la gran pregunta?


Ver Perfil WWW
[Resuelto] [JQuery]\/(Ayuda) - Como hacer un Listview Horizontal
« en: 30 Junio 2015, 18:24 pm »

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!


« Última modificación: 23 Julio 2015, 13:37 pm por #!drvy » En línea



Creador de BrainMind
ZeroVzla

Desconectado Desconectado

Mensajes: 71


Ver Perfil
Re: [JQuery]\/(Ayuda) - Como hacer un Listview Horizontal
« Respuesta #1 en: 21 Julio 2015, 04:25 am »

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!!...


En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.850



Ver Perfil WWW
Re: [JQuery]\/(Ayuda) - Como hacer un Listview Horizontal
« Respuesta #2 en: 21 Julio 2015, 14:49 pm »

CSS

Código
  1. .item {
  2.    border: 1px solid #999;
  3.    border-radius: 5px;
  4.    box-shadow: 0px 0px 5px #ccc;
  5.    display: inline-block;
  6.    font-size: 0.8em;
  7.    margin:5px;
  8.    max-width: 200px;
  9. }
  10.  
  11.  
  12.    /* resetear */
  13.    .item * { margin: 0; padding: 0; }
  14.  
  15.    .item .image, .item .author { padding: 5px; }
  16.  
  17.    /* Estilo de la imagen */
  18.    .item .image img {
  19.        border-radius: 3px;
  20.        height: 170px;
  21.        width: 170px;
  22.    }
  23.  
  24.    /* Estilo del autor */
  25.    .item .author { display: table; }
  26.  
  27.        /* Posicionamiento de  titulo, imagen y pefil del autor. */
  28.        .item .author .author-img, .item .author .author-info {
  29.            display: table-cell;
  30.            padding:2px 3px 2px 0px;
  31.            vertical-align: top;
  32.        }
  33.  
  34.        /* Estilo imagen del autor */
  35.        .item .author .author-img { }
  36.  
  37.            .item .author .author-img img {
  38.                border-radius: 3px;
  39.                height: 42px;
  40.                width: 42px;
  41.            }
  42.  
  43.        /* Estilo infomracion autor */
  44.        .item .author .author-info {
  45.            line-height: 1.7em;
  46.            padding-left: 4px;
  47.        }
  48.  
  49.            /* Estilo titulo de la imagen */
  50.            .item .author .author-info .title {
  51.                display: block;
  52.                font-weight: 700;
  53.                font-size: 1.2em;
  54.            }
  55.  
  56.            /* Estilo nombre autor */
  57.            .item .author .author-info .profile a {
  58.                color: #069;
  59.                font-weight: 700;
  60.                text-decoration: underline;
  61.            }
  62.  
  63.    /* Estilo comentarios */
  64.    .item .comments {
  65.        border-top: 1px solid #999;
  66.        color: #444;
  67.        padding: 5px;
  68.        text-align: center;
  69.    }

HTML

Código
  1. <!-- Aqui tu while -->
  2.  
  3. <div class='item'>
  4.  
  5.    <div class='image'>
  6.        <img src='' alt=''>
  7.    </div>
  8.  
  9.    <div class='author'>
  10.  
  11.        <div class='author-img'>
  12.            <img src='' alt=''>
  13.        </div>
  14.  
  15.        <div class='author-info'>
  16.            <span class='title'></span>
  17.            <span class='profile'>by <a href='#'></a>.</span>
  18.        </div>
  19.  
  20.    </div>
  21.  
  22.    <div class='comments'>
  23.        <span>X comments, X likes</span>
  24.    </div>
  25.  
  26. </div>
  27.  
  28. <!-- Termina el while -->
  29.  


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
En línea

Brian1511

Desconectado Desconectado

Mensajes: 268


¿Quien soy esa es la gran pregunta?


Ver Perfil WWW
Re: [JQuery]\/(Ayuda) - Como hacer un Listview Horizontal
« Respuesta #3 en: 23 Julio 2015, 01:26 am »

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

Saludos!
En línea



Creador de BrainMind
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Panel Vertical/Horizontal desplegable con jQuery
PHP
Shell Root 2 6,641 Último mensaje 20 Febrero 2012, 23:18 pm
por Shell Root
como hacer una consulta SQL con JQUERY
Bases de Datos
herminio59 1 5,281 Último mensaje 3 Abril 2014, 03:00 am
por engel lex
[Resuelto] Jquery y foreach
Desarrollo Web
dimitrix 3 2,503 Último mensaje 6 Febrero 2015, 01:08 am
por dimitrix
[Resuelto][javascript]¿Como hacer esto sin usar jquery?
Desarrollo Web
LaThortilla (Effort) 4 3,233 Último mensaje 23 Abril 2015, 03:51 am
por LaThortilla (Effort)
como hacer if responsive jquery/css
Desarrollo Web
d91 2 1,723 Último mensaje 23 Noviembre 2015, 11:50 am
por d91
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines