0

ここの長さについては申し訳ありません。私は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つのステップに戻ります。次に新しい行、次に上記の製品の価格を含む3つの新しい列、セパレーター、そしてそこから続行します。

このようにして、タイトルのサイズに関係なく、価格はすべて互いに垂直方向に揃えられます。私は複数のネストされたループのパスを進んでいましたが、それでも最終結果に近づくことはできませんでした。

助けていただければ幸いです。

4

1 に答える 1

0

説明と価格を2つの異なるものに入れる必要があります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>

例を作成しました。必要なのは、それをテーブル作成に組み込むことだけです。

于 2010-06-21T18:34:32.937 に答える