Juntar las entradas en vertical

[satanson123]

Hola amigos estoy rediseñando una web que habia hecho el problema esta que en vertical no se juntan las entradas, les dejare una imagen para que vean de que hablo.



Lo que quiero es que los post se peguen arriba, la estoy haciendo como la tiene ebay.com

Aqui le dejo el css que controla esa parte.

Código CSS:

.article{
    width: 235px;
    margin: 0 10px 10px 0;
    border: 1px solid #d4d4d4;
    float:left;
    position: relative;
    overflow: hidden;
    -webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.07);
-moz-box-shadow:    0px 0px 5px 0px rgba(0, 0, 0, 0.07);
box-shadow:         0px 0px 5px 0px rgba(0, 0, 0, 0.07);
-webkit-transition: all 0.2s ease;
    -moz-transition:    all 0.5s ease;
    -o-transition:      all 0.5s ease;
    -ms-transition:     all 0.5s ease;
    transition:         all 0.5s ease;
    
}
.article:hover{
    border: 1px solid #AAA;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(50,50,50,0.1);
-moz-box-shadow:    0px 0px 5px 0px rgba(50,50,50,0.1);
box-shadow:         0px 0px 5px 0px rgba(50,50,50,0.1);
 
}
.article #title{
    background: url(images/t-back.png) repeat;
    color: #fff;
    width: 100%;
    position:absolute;
    padding: 5px;
    top: -100px;
    -webkit-transition: all 0.5s ease;
    -moz-transition:    all 0.5s ease;
    -o-transition:      all 0.5s ease;
    -ms-transition:     all 0.5s ease;
    transition:         all 0.5s ease;
}
.article:hover > #title{
    top: 0;
}
 

y el bucle

Código PHP:

<?php 
$i = 0;
$query = new wp_query('nopaging=true&cat=49&order=ASC');
     if($query->have_posts()) : ?>
    <?php while($query->have_posts()) : $query->the_post(); $post_id = get_the_ID(); $i++?>
    
 
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
    <article class="post article" id="post-<?php the_ID(); ?>">
    
       <div id="title"><?php the_title(); ?></div>
       
    <div id="thumbnail" style="float:left;"><?php the_post_thumbnail(array(230,230)); ?></div>
 
      
        <div class="pr">
     
RD$ <?php echo $text_meta_field = get_post_meta( $post_id, 'precio', true ); ?>
       </div>
          
            
 
    </article>
    </a>
 
   
    
    <?php endwhile; ?>
 
 
 
    <?php endif; ?>
 

[ArturoGallegos]

el problema radica en que no todas las imágenes tienen la misma altura, con CSS no hay nada que hacer.

Tendrás que recurrir a javacript, jquery o bien hacer imágenes de la misma altura.

Tu sitio seguramente ya carga jquery así que por facilidad optaría por usar la función each para checar el tamaño de cada elemento y asignar el mas grande a todos los elementos.

[satanson123]

Iniciado por ArturoGallegos

el problema radica en que no todas las imágenes tienen la misma altura, con CSS no hay nada que hacer.

Tendrás que recurrir a javacript, jquery o bien hacer imágenes de la misma altura.

Tu sitio seguramente ya carga jquery así que por facilidad optaría por usar la función each para checar el tamaño de cada elemento y asignar el mas grande a todos los elementos.

no tendras algun ejemplo facil por hay que pueda estudiar y llebarme de ese?

[ArturoGallegos]

No tengo ningún ejemplo a la mano pero no es difícil, revisa la documentación no es difícil, cuando yo lo hice solo tuve que revisar estos dos links

http://api.jquery.com/jquery.each/
http://api.jquery.com/height/