1

我必须使用旧的模板系统才能在网页上显示购物产品。今天，所有产品都一排一排地展示了所有的细节

P1
P2
P3
P4

这个旧软件使用一对标签<ED_START> <ED_END>来标记必须在 HTML 页面中重复的产品模板。事实上，每个产品都有自己的 HTML 表格。它一直有效。

现在我想要的是通过水平和垂直显示元素来减小显示尺寸，比如

P1 P2
P3 P4
P5 P6

或者

P1 P2 P3
P4 P5 P6

根据屏幕分辨率。

我知道如果我将产品模板更改为 a <td>，那么浏览器将尝试在同一行上呈现 10 个或更多产品，这正是我不想要的。

通常，我会</tr><tr>每 2 个元素插入一个，但是这个模板系统（这是一个遗留的专有软件）不允许这样做。所有项目的模板必须相同，纯 HTML 加上他们自己的价格、描述、图片等标记。

我的问题是

如何在 HTML 中创建一个表格，使列数适应可用的屏幕大小（换句话说，根据需要自动换行）？可以使用 JavaScript 和 jQuery。

4

3 回答 3

0

你想要的是响应式设计，twitter bootstrap就是一个很好的例子。

于 2012-09-19T16:48:21.667 回答
0

尝试使用媒体查询 -演示

table {
    border: solid;
    float: left;
}

@media only screen and (max-width: 480px) {
    table { width: 100%; }
}

@media only screen and (max-width: 800px) and (min-width: 481px) {
    table { width: 49%; }
}

@media only screen and (min-width: 801px) {
    table { width: 33%; }
}
于 2012-09-19T16:51:14.787 回答
0

很好地使用divs，例如http://android.hd2roms.com/，可以提供帮助。

秘密float:left在于使它们按顺序出现的样式

于 2012-09-27T20:59:15.567 回答