Question

抱歉这里的长度。我正在使用oscommerce，并在3列表中列出了我们所有产品特价的页面。我需要调整每个产品的价格，以便所有价格在屏幕上相互对齐。

在视觉上，这就是我想要的：

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

目前，这是现有代码生成的内容：

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

这是代码：

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

我试图编写一些写出图像和标题的代码，然后将数据中的3个步骤带回来。接下来是一个新行，然后是三个包含上述产品价格的新列，一个分隔符，然后从那里继续。

这样，无论标题的大小如何，价格都将彼此垂直对齐。我正在寻找多个嵌套循环的传递，但仍然没有接近我的最终结果。

非常感谢帮助。

Answer 1

您应该将说明和价格分为两个不同的div：

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

我刚刚创建了一个示例，您需要做的就是将其用于创建表。

垂直调整多个表格单元格中的产品价格

1 个答案: