Question

我有以下代码在博客博客中并排显示一些图片，但我面临显示尺寸问题

<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
<table border="0">
<tr>
<td><a href="URL" target="_blank" title="pic1">
<img height=200 width=120 src="IMAGE LINK" alt="pic name" style="border:none;"/></a></td>
<td><a href="URL" target="_blank" title="pic2">
<img height=200 width=120 src="IMAGE LINK" alt="pic name" style="border:none;"/></a></td>
</tr>
</table>
</div>

问题在于，如果我连续放置2个以上的图像或者不减小上述代码中图像的宽度，则在使用移动设备等小屏幕设备时，图像将无法适应屏幕。它在计算机浏览器上运行良好，因为有足够的空间让图像适合。

我想在这里做的是，我想在一行和移动设备上显示2个以上的图像，它应该是自动排列的。我的意思是，让我说我在上面的代码中放了6张图片，在移动设备上，我想连续显示两个图像，下面的两个图像依次显示，依此类推（如瓷砖）。现在，当我使用上面的代码并在移动设备上查看博客时，我只能看到正确显示的第一张图片和第二张图片的一半。根本看不到第三张图像。我希望所有图像具有相同的宽度和高度，如果屏幕没有足够的空间在同一行显示图像，则应自动将其移动到下一行。我怎么能这样做？

Answer 1

我假设您使用的高度：宽度比率反映原始图像的高度：宽度比率，因此仅指定宽度。图像将是其父级a元素的100％。您可以通过指定nobrtable元素的宽度，位置等来进一步控制它。

<style type="text/css">
  .nobrtable a   { display: block; float: left; width:50%; max-width:120px; }
  .nobrtable img { border:solid 1px black; float:left; width: 100%; }
</style>
<div class="nobrtable">
  <a href="URL" target="_blank" title="pic1">
    <img src="IMAGE LINK" alt="pic name" />
  </a>
  <a href="URL" target="_blank" title="pic2">
    <img src="IMAGE LINK" alt="pic name" />
  </a>
</div>

根据屏幕大小调整博客图像小部件的大小

1 个答案: