Question

我必须使用旧的模板系统在网页上显示购物产品。今天，所有产品都会逐行显示所有细节

P1
P2
P3
P4

此旧版软件使用一对标记<ED_START> <ED_END>来标记必须在HTML页面中重复的产品模板。实际上，每个产品都有自己的HTML表。它可以工作一天。

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

P1 P2
P3 P4
P5 P6

或

P1 P2 P3
P4 P5 P6

根据屏幕分辨率。

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

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

我的问题是

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

Answer 1

你想要的是responsive design，twitter bootstrap就是一个很好的例子。

Answer 2

尝试使用媒体查询 - DEMO

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%; }
}

Answer 3

善于使用div，就像http://android.hd2roms.com/一样，可以提供帮助。

秘密是float:left样式，使它们按顺序出现

没有足够空间时自动包装表格列

我的问题是

3 个答案: