1

我们有一个生成产品列表的系统。它将这些结果全部放在一个 yummy(!) 表中，并在其中嵌套另一个以包裹产品图像。每件商品只有一张图片和产品标题，两者都链接到产品页面。

我无法编辑任何生成的 HTML，但我可以编辑页脚/页眉等以添加 Jquery，并且可以编辑 CSS，这是我解决大多数问题的方式。

我可以在 CMS 中更改的唯一相关部分是显示了多少列产品。在小型手机上，我希望这是 1，平板电脑可能是 3，台式机最多 6。这只是表格中 tr 的宽度。如果我将其设置为 1，我想我可以通过将单个 td 宽 trs 彼此相邻浮动来包装它们，我可以，是的。

当产品的标题很长时，就会出现我的问题。如果连续 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>

这些都不是真正可编辑的，但是我怎样才能将它变形为我想要的工作方式？第二个 a 上的双 br 在那里，因为通常会在它们之间显示一个简短的描述，但我已经在 CMS 中隐藏了它，因为它在较长的描述上弄乱了布局..

Lil '更新（我会在某个时候掌握网站..）

http://jsfiddle.net/fjnN6/这解释了问题，当我其中一个标题较长时，下一行从它的右侧开始。蒂亚:)

4

1 回答 1

0

好的，如果我正确地为您提供了简单的td元素 CSS 将为您节省时间：

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

这将隐藏所有超过 width 属性值的内容。如果这不是理想的行为，请提供一些屏幕截图。

于 2012-11-14T14:09:45.383 回答