这是我的网页之一:
http://isometricland.net/artwork/artwork.php
当浏览器窗口较小时,如何使包含图像缩略图和说明的表重排? (例如,移动设备。)
没有JavaScript,有没有办法做到这一点?可以使用内联DIV完成此操作,并且外观仍然一样吗?
谢谢。
[编辑]
这是缩略图的两个“行”减去URL的样子:
<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中。
这是屏幕截图:
如您在代码中所见,有两行数据,但有六行HTML标记。我愿意改变这一点,使他们平等。
最佳答案
该表不会重排(即换行),因为它是一个表。在图像上设置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 */
}
...让页面自然回流?
关于html - 图库表重排,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39157816/