Вертикально выровнять цены товаров по нескольким ячейкам таблицы - PullRequest
Новая
       24

Вертикально выровнять цены товаров по нескольким ячейкам таблицы

0 голосов
/ 21 июня 2010

Извините за длину здесь. Я использую oscommerce и у меня есть страница со всеми нашими специальными предложениями в виде таблицы из трех столбцов. Мне нужно выровнять цену каждого товара так, чтобы все цены совпали по экрану друг с другом.

Визуально, это то, что я хотел бы: 

|-----------------------|
| 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 шага в массиве. Затем новая строка, затем три новых столбца, содержащие цены на продукты выше, разделитель, а затем продолжите оттуда.

Таким образом, все цены будут вертикально выровнены друг с другом, независимо от размера заголовка. Я шел по проходу нескольких вложенных циклов и все еще не подходил к своему окончательному результату.

Помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 21 июня 2010

Вы должны поместить описание и цену в два разных 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>

Я только что создал пример, все, что вам нужно сделать, это обработать егов создание вашей таблицы.

...