0

250x60 のさまざまなサイズから 80x60 の最小サイズのロゴ画像のみを保持する巨大なテーブル (6 x 10) があります。

これは私の HTML コードです。携帯電話やタブレットで表示するときに、より長くて狭い表に分割する方法が必要です。私がそれを掘り下げることができるように、リードを提供してもらえますか:) 私はWordPressを使用しており、テーマはレスポンシブであるため、今のところ注意が必要な部分はこの表だけです.

純粋な CSS でこれを行うことはできますか、それとも jQuery を使用してテーブル 3x20 バージョンを変更する必要がありますか? レスポンシブ HTML テーブルをグーグル検索しましたが、数字のテーブルしか取得できませんでした :(

それとも、テーブルを残して代わりに div を使用しますか?

<table border="0" bordercolor="#336633" style="background-color:#FFFFFF" width="100%" cellpadding="0" cellspacing="0">
    <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
    </tr>
    <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
    </tr>
    <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
    </tr>
    <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
    </tr>
    <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
    </tr>
    <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
    </tr>
</table>
4

3 に答える 3

0

いくつかの CSS:

.awesomeWrapper {
  float: left;
}

そしていくつかのHTML：

<div class="awesomeWrapper">
  <div><img src="someImage" alt="Some Image"></div>
  <div><img src="someImage" alt="Some Image"></div>
  <div><img src="someImage" alt="Some Image"></div>
</div>
<div class="awesomeWrapper">
  <div><img src="someImage" alt="Some Image"></div>
  <div><img src="someImage" alt="Some Image"></div>
  <div><img src="someImage" alt="Some Image"></div>
</div>
<!-- Repeat this pattern -->

このように、画面が小さすぎて 1 行に 6 つの画像が収まらない場合、それぞれ 3 つの画像を含む 2 行に自動的に再構成されます。同じロジックを 6x10 グリッドに適用すると、小さい画面では 3x20 に再配置されます。

レイアウトの残りの部分によっては、通常のビューで 1 行に 6 つの要素のみが表示されるように、いくつかの調整を行う必要があります。

于 2013-08-15T15:55:45.920 に答える