1

Web ページにショッピング商品を表示するには、古いテンプレート システムを使用する必要があります。今日、すべての製品がすべての詳細とともに行ごとに表示されます

P1
P2
P3
P4

この古いソフトウェアは、タグのペアを使用して<ED_START> <ED_END>、HTML ページで繰り返す必要がある製品テンプレートをマークします。実際、各製品には独自の HTML テーブルがあります。それは一日中働きます。

今私が欲しいのは、要素を水平方向と垂直方向に表示することで表示サイズを縮小することです。

P1 P2
P3 P4
P5 P6

また

P1 P2 P3
P4 P5 P6

画面解像度による。

製品テンプレートを に変更すると<td>、ブラウザが同じ行に 10 個以上の製品をレンダリングしようとすることはわかっていますが、これはまさに私が望んでいないことです。

通常、</tr><tr>2 要素ごとに挿入しますが、このテンプレート システム (これは従来のプロプライエタリ ソフトウェアです) ではそれができません。テンプレートは、純粋な HTML に加えて、価格、説明、画像などの独自のマーカーで、すべてのアイテムで同じでなければなりません。

私の質問は

使用可能な画面サイズに合わせて列数を調整する (つまり、必要に応じて列を自動的に折り返す) テーブルを HTML で作成するにはどうすればよいですか? JavaScript と jQuery が使用できます。

4

3 に答える 3

0

http://android.hd2roms.com/divのように、sをうまく使用すると役立ちます。

秘密はfloat:leftそれらを順番に表示させるスタイルにあります

于 2012-09-27T20:59:15.567 に答える
0

メディアクエリで試す - 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%; }
}
于 2012-09-19T16:51:14.787 に答える
0

あなたが望むのはレスポンシブデザインです.twitterのブートストラップはその良い例です.

于 2012-09-19T16:48:21.667 に答える