Aligner verticalement les prix des produits sur plusieurs cellules de table

Question

Désolé pour la longueur ici. J'utilise oscommerce et ai une page avec tous nos produits spéciaux disposés dans un tableau de 3 colonnes. Je dois aligner le prix de chaque produit afin que tous les prix s'alignent sur l'écran les uns avec les autres.

visuellement, ce que je voudrais:

|-----------------------| 
| Image | Image | Image | 
| Title | Long | Very, | 
|  | Title | very, | 
|  |  | long | 
|  |  | title | 
|$19.99 |$29.99 |$139.00| 
|-----------------------| 

Actuellement, c'est ce que le code existant génère:

|-----------------------| 
| Image | Image | Image | 
| Title | Long | Very, | 
| $19.99| Title | very, | 
|  |$29.99 | long | 
|  |  | title | 
|  |  |$139.00| 
|-----------------------| 

Ceci est le code tel qu'il est:

<table border="0" width="100%" cellspacing="0" cellpadding="2"> 
    <tr> 
<?php 
$column = 0; 
$specials_query = tep_db_query($specials_split->sql_query); 
while ($specials = tep_db_fetch_array($specials_query)) { 
    $column ++; 
    echo '<td align="center" width="33%" class="productListing-data" valign="top"> 
    <div class="prodimagebox"><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 
    'products_id=' . $specials['products_id']) . '">' . tep_image(DIR_WS_IMAGES . 
    $specials['products_image'], $specials['products_name'], SMALL_IMAGE_WIDTH, 
    SMALL_IMAGE_HEIGHT) . '</a></div><br><a href="' . 
    tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $specials['products_id']) 
    . '">' . $specials['products_name'] . '</a><br>' 
    . $currencies->display_price($specials['specials_new_products_price'], 
    tep_get_tax_rate($specials['products_tax_class_id'])) . '</td>' . "\n"; 

    if ((($column/3) == floor($column/3))) { 
?> 
    </tr> 
     <tr> 
     <td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td> 
     </tr> 
     <tr> 
<?php 
    } 
} 
?> 
    </tr> 
</table> 

J'essayais d'écrire du code qui écrit l'image et le titre, puis nous ramène 3 étapes dans le tableau. Ensuite, une nouvelle ligne, puis trois nouvelles colonnes contenant les prix des produits ci-dessus, un séparateur, puis continuer à partir de là. De cette façon, les prix seraient tous alignés verticalement les uns avec les autres, peu importe la taille du titre. Je me dirigeais vers le bas de plusieurs boucles imbriquées et je n'approchais toujours pas de mon résultat final.

L'aide serait grandement appréciée.

Answer 1

vous devez mettre la description et le prix en deux différents div s:

<style> 
    td.productListing-data div.item_wrapper { 
    position: relative; 
    } 
    td.productListing-data div.item_wrapper div.item_description { 
    margin-bottom: 15px; 
    } 
    td.productListing-data div.item_wrapper div.item_price { 
    position: absolute; 
    bottom: 0; 
    height: 15px; 
    } 
</style> 

---

<td align="center" width="33%" class="productListing-data" valign="top"> 
    <div class="item_wrapper"> 
    <div class="item_description"> 
     <!-- the description --> 
    </div> 
    <div class="item_price"> 
     <!-- the price --> 
    </div> 
    </div> 
</td> 

Je viens de créer un exemple, tout ce que vous devez faire est de travailler dans votre table création.