1

製品のリストを生成するシステムがあります。これらの結果はすべておいしい (!) テーブルに配置され、その中にネストされた別のテーブルが製品画像を囲みます。各アイテムには画像と商品のタイトルのみがあり、どちらも商品ページにリンクされています。

この生成された HTML は編集できませんが、フッター/ヘッダーなどを編集して Jquery を追加したり、CSS を編集したりできます。これは、ほとんどの問題を回避してきた方法です。

CMS で変更できる唯一の関連部分は、表示される製品の列数です。小さい電話では、これを 1、タブレットでは 3、デスクトップでは最大 6 にしたいと考えています。これは、表の tr の幅です。これを 1 に設定すると、1 つの td 幅の tr を隣同士に浮かせてラップできると考えました。

製品のタイトルが長い場合に問題が発生します。連続する 5 つの商品のうち 4 番目の商品のタイトルが長い場合、次の行の最初の商品は 5 位になり、最初の 4 か所が空白になります。

いくつかのHTMLが役立つかもしれません..

<table id="catprods_tbl" width="100%">
<tbody>
<tr>
<td class="column_main" align="center" valign="top">
<table cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td class="column_main">
<a class="links_main" href="/linktoproduct"><img src="/images/thumb.jpg" border="0"></a>
</td>
</tr>
</tbody>
</table>
<a class="links_main" href="/linktoproduct">ProductTitle</a><br>£320.00<br><br>
</td>
</tr>
</tbody>
</table>

これは実際には編集できませんが、どのようにモーフィングして希望どおりに動作させることができますか? 2 番目の a に二重の br があるのは、通常はそれらの間に短い説明が表示されるためですが、長い説明のレイアウトを台無しにしていたため、CMS で非表示にしました..

Lil 'update (私はある時点でサイトを理解するつもりです..)

http://jsfiddle.net/fjnN6/これは問題を説明しています.1つに長いタイトルがあると、次の行がその右側から始まります。ティア:)

4

1 に答える 1

0

わかりました。要素の単純なCSSを正しく取得するtdと、時間を節約できます。

table td {
    width: 50px;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
}

これにより、widthプロパティ値を超えるすべてのコンテンツが非表示になります。それが望ましくない動作である場合は、スクリーンショットをいくつか提供してください。

于 2012-11-14T14:09:45.383 に答える