html - 将充满图像的 HTML 表格转换为在移动设备上看起来不错

Question

我有一个完全由八张图片组成的 HTML 表格。它们是拼图，因此必须准确准确地放置它们。

这在桌面上很容易，我只是使用绝对定位来处理像素并使其工作。虽然在手机上看起来像垃圾。碎片仍然在一起，但拼图一直在屏幕右侧，而且太大了。我已经做了一些谷歌搜索，但我发现的唯一结果是由文本组成的表格，这对我的情况不起作用。

这是表格，如果有人感兴趣的话 -

<table width="100%" id="table" border="0" cellpadding="0" cellspacing="5" align="center">
                <tr>
                    <td id="one">
                        <img src="1.png" class="merge0">
                    </td>
                    <td id="two">
                        <img id="2" src="6.png" class="merge">
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td id="three">
                        <img src="4.png" class="row1">
                    </td>
                    <td id="four">
                        <img src="2.png" class="merge1">
                    </td>
                    <td id="five">
                        <img src="7.png" class="merge2">
                    </td>
                </tr>
                <tr>
                    <td id="six">
                        <img src="8.png" class="row2">
                    </td>
                    <td id="seven">
                        <img src="5.png" class="row3">
                    </td>
                    <td id="eight">
                        <img src="3.png" class="row4">
                    </td>
                </tr>
            </table>

我阅读了一些关于 jQuery Mobile 的内容，但我从未真正掌握 jQuery 的概念，而 Mobile 对我来说是一个外国平台。我希望能学习 :)

我也尝试过那些“桌面到移动”转换器，但它们都很糟糕。

编辑 - 我认为人们可能会建议我完全取出 table 并使用不同的方法来排列我的图像。我真的不确定该怎么做，如果我能保持当前的设置，我会更喜欢它。如果不可能，我会很感激一些关于如何以不同方式做到这一点的指示。

Answer 1

查看 getting started page然后使用 jQuery-mobile grids :

<div class="ui-grid-a">
  <div class="ui-block-a"><img src="1.png" class="merge0"></div>
  <div class="ui-block-b"><img id="2" src="6.png" class="merge"></div>
</div>

对于包含三个图像的网格，只需使用“ui-grid-b”

希望对你有帮助

最好的

中号