图像库表回流

时间:2016-08-26 03:20:53

标签: html css html-table

这是我的一个网页:

http://isometricland.net/artwork/artwork.php

当浏览器窗口很小时,如何使包含图像缩略图和描述的表重排? (例如,移动设备。)

有没有办法在没有JavaScript的情况下完成?这可以通过内联DIV完成,看起来仍然一样吗?

感谢。

[编辑]

这里有两个"行"缩略图看起来像减去网址:

<table class="stab">
    <tr>
        <td class="a2x1"><a target="_blank" href=""><img src="" border="0" alt="HSL Sphere (SVG; thumbnail)" /></a></td>
        <td class="a1x1"><a target="_blank" href=""><img src="" border="0" alt="RGB Cube (SVG; thumbnail)" /></a></td>
        <td class="a4x3"><a target="_blank" href=""><img src="" border="0" alt="Color solid comparison" /></a></td>
        <td class="a7x6"><a target="_blank" href=""><img src="" border="0" alt="Colored mind" /></a></td>
    </tr>
    <tr>
        <td><a target="_blank" href="">HSLSphere</a></td>
        <td><a target="_blank" href="">RGBCube b</a></td>
        <td><a target="_blank" href="">Color solid comparison</a></td>
        <td><a target="_blank" href="">Colored mind</a></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td><i>(Facial portrait by another author.)</i></td>
    </tr>
    <tr>
        <td class="a1x1"><a target="_blank" href=""><img src="" border="0" alt="Munsell color solid cylinder" /></a></td>
        <td class="a1x1"><a target="_blank" href=""><img src="" border="0" alt="Munsell color solid sphere" /></a></td>
        <td class="a1x1"><a target="_blank" href=""><img src="" border="0" alt="Camera focal length effects" /></a></td>
        <td class="a1x1"><a target="_blank" href=""><img src="" border="0" alt="Graphical projection comparison" /></a></td>
    </tr>
    <tr>
        <td><a target="_blank" href="">Munsell color solid cylinder</a></td>
        <td><a target="_blank" href="">Munsell color solid sphere</a></td>
        <td><a target="_blank" href="">Camera focal length distance</a></td>
        <td><a target="_blank" href="">Graphical projection comparison</a></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

该表也包含在另一个以表格对齐为中心的DIV中。

这是一个截图:

enter image description here

正如您在代码中看到的那样,有两行数据,但有六行HTML标记。我愿意改变它以使它们平等。

1 个答案:

答案 0 :(得分:1)

该表不会重排(即换行换行),因为它是一个表。在图像上设置max-width:100%height:auto会有所帮助,但在真正小的设备尺寸下,有四列是不切实际的。

为什么不将每个单元格的内容用...包裹在<div>元素中

div{
    height: /* some declared height */;
    width:  25%; /* four cells per row */
    float:left;
    padding: 10px; /* for legibility */
    box-sizing: border-box; /* so padding counts toward declared dimensions */
}

...让页面自然回流?