HTML 方形裁剪缩略图网格

Question

我正在尝试使用 HTML/CSS 中的纵向和横向图像为 Blogger 创建响应式缩略图网格。我还没有找到任何预制的解决方案来解释不同方向的图像。之前用过下面的代码，但是用起来很麻烦，而且用到了表格:

<table style="margin-left:-3px;" border="0">
<tr><td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 100px; margin: -14px -20px 0px 0px;">
<a href="http://1.bp.blogspot.com/-PPFiMVxvw5Y/UWtx6pU68YI/AAAAAAAAAHg/j8bXN4KHUBU/s1600/4-108.jpg" imageanchor="1" title="Daylight">
<img style="position: absolute; top:-50px; border="0" src="http://1.bp.blogspot.com/-PPFiMVxvw5Y/UWtx6pU68YI/AAAAAAAAAHg/j8bXN4KHUBU/s150/4-108.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 100px; margin: -14px -20px 0px 0px;">
<a href="http://1.bp.blogspot.com/-pchlGmQn8xU/UWtyEKIbKFI/AAAAAAAAAIQ/IUH8v3Pk9AE/s1600/4-71.jpg" imageanchor="1" title="Daylight">
<img style="position: absolute; top:-50px; border="0" src="http://1.bp.blogspot.com/-pchlGmQn8xU/UWtyEKIbKFI/AAAAAAAAAIQ/IUH8v3Pk9AE/s150/4-71.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 120px; margin: -18px 14px 12px 0px;">
<a href="http://3.bp.blogspot.com/-k5oXNNfTR2o/UWtx7DHQMSI/AAAAAAAAAHo/IcfBH1B2Nr0/s1600/4-141.jpg" imageanchor="1" title="Hostage Calm">
<img style="position: absolute; left:-35px; border="0" src="http://3.bp.blogspot.com/-k5oXNNfTR2o/UWtx7DHQMSI/AAAAAAAAAHo/IcfBH1B2Nr0/s150/4-141.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 120px; margin: -18px 14px 12px 0px;">
<a href="http://2.bp.blogspot.com/-h-NZD0TSM4A/UWtx8VVYIII/AAAAAAAAAHw/Lf5_ohJl-BQ/s1600/4-153.jpg" imageanchor="1" title="Hostage Calm">
<img style="position: absolute; left:-35px; border="0" src="http://2.bp.blogspot.com/-h-NZD0TSM4A/UWtx8VVYIII/AAAAAAAAAHw/Lf5_ohJl-BQ/s150/4-153.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 120px; margin: -18px 14px 12px 0px;">
<a href="http://1.bp.blogspot.com/-pns3r8rdUVA/UWwszQPxmlI/AAAAAAAAAJU/c_MCm6pAQcM/s1600/4-131.jpg" imageanchor="1" title="Mixtapes">
<img style="position: absolute; left:-35px; border="0" src="http://1.bp.blogspot.com/-pns3r8rdUVA/UWwszQPxmlI/AAAAAAAAAJU/c_MCm6pAQcM/s150/4-131.jpg" />
</a></div>
</td></tr>
<tr><td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 120px; margin: -18px 14px 12px 0px;">
<a href="http://1.bp.blogspot.com/-g6od5jPw2To/UWws0cT-CCI/AAAAAAAAAJg/Zbt9oWC8MFg/s1600/4-132.jpg" imageanchor="1" title="Mixtapes">
<img style="position: absolute; left:-35px; border="0" src="http://1.bp.blogspot.com/-g6od5jPw2To/UWws0cT-CCI/AAAAAAAAAJg/Zbt9oWC8MFg/s150/4-132.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 100px; margin: -14px -20px 0px 0px;">
<a href="http://4.bp.blogspot.com/-I4U9DF5jpUA/UWws0beG4jI/AAAAAAAAAJc/47wjlevC34k/s1600/4-42.jpg" imageanchor="1" title="You Blew It!">
<img style="position: absolute; top:-50px; border="0" src="http://4.bp.blogspot.com/-I4U9DF5jpUA/UWws0beG4jI/AAAAAAAAAJc/47wjlevC34k/s150/4-42.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 120px; margin: -18px 14px 12px 0px;">
<a href="http://4.bp.blogspot.com/-rXjeRPm-XaU/UWws1EOjb9I/AAAAAAAAAJs/EEyk5RXHjsE/s1600/4-44.jpg" imageanchor="1" title="You Blew It!">
<img style="position: absolute; left:-35px; border="0" src="http://4.bp.blogspot.com/-rXjeRPm-XaU/UWws1EOjb9I/AAAAAAAAAJs/EEyk5RXHjsE/s150/4-44.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 120px; margin: -18px 14px 12px 0px;">
<a href="http://4.bp.blogspot.com/-BXnqebnoEdg/UWws2twugaI/AAAAAAAAAJ0/URAOyty5PdQ/s1600/4-46.jpg" imageanchor="1" title="You Blew It!">
<img style="position: absolute; left:-35px; border="0" src="http://4.bp.blogspot.com/-BXnqebnoEdg/UWws2twugaI/AAAAAAAAAJ0/URAOyty5PdQ/s150/4-46.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 120px; margin: -18px 14px 12px 0px;">
<a href="http://1.bp.blogspot.com/-ZktVzEjRh6A/UWws2j8d26I/AAAAAAAAAJ4/msp0x00Qli0/s1600/4-58.jpg" imageanchor="1" title="You Blew It!">
<img style="position: absolute; left:-35px; border="0" src="http://1.bp.blogspot.com/-ZktVzEjRh6A/UWws2j8d26I/AAAAAAAAAJ4/msp0x00Qli0/s150/4-58.jpg" />
</a></div>
</td></tr>
<tr><td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 100px; margin: -14px -20px 0px 0px;">
<a href="http://3.bp.blogspot.com/-Hljl68Y-3Bs/UWx446aZ83I/AAAAAAAAAKs/NrmAXgZ4SyY/s1600/4-5.jpg" imageanchor="1" title="Ages">
<img style="position: absolute; top:-50px; border="0" src="http://3.bp.blogspot.com/-Hljl68Y-3Bs/UWx446aZ83I/AAAAAAAAAKs/NrmAXgZ4SyY/s150/4-5.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 120px; margin: -18px 14px 12px 0px;">
<a href="http://4.bp.blogspot.com/-JUkUq0Mjcy0/UWx47mM7-DI/AAAAAAAAAK0/MyMht6reYeU/s1600/4-7.jpg" imageanchor="1" title="Ages">
<img style="position: absolute; left:-35px; border="0" src="http://4.bp.blogspot.com/-JUkUq0Mjcy0/UWx47mM7-DI/AAAAAAAAAK0/MyMht6reYeU/s150/4-7.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 120px; margin: -18px 14px 12px 0px;">
<a href="http://2.bp.blogspot.com/-QhSig2DBDbo/UWx4iRPDEWI/AAAAAAAAAKM/gm8gz2lUBG8/s1600/4-137.jpg" imageanchor="1" title="Candy Hearts">
<img style="position: absolute; left:-35px; border="0" src="http://2.bp.blogspot.com/-QhSig2DBDbo/UWx4iRPDEWI/AAAAAAAAAKM/gm8gz2lUBG8/s150/4-137.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 100px; margin: -14px -20px 0px 0px;">
<a href="http://4.bp.blogspot.com/-jeYg22ByEiY/UWx4iUQpwxI/AAAAAAAAAKQ/7c9fiShT5y8/s1600/4-136.jpg" imageanchor="1" title="Candy Hearts">
<img style="position: absolute; top:-50px; border="0" src="http://4.bp.blogspot.com/-jeYg22ByEiY/UWx4iUQpwxI/AAAAAAAAAKQ/7c9fiShT5y8/s150/4-136.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 120px; margin: -18px 14px 12px 0px;">
<a href="http://2.bp.blogspot.com/-ZY5qFY12QUI/UWx4oR14wKI/AAAAAAAAAKc/SW3BWT67pvA/s1600/4-38.jpg" imageanchor="1" title="Light Years">
<img style="position: absolute; left:-35px; border="0" src="http://2.bp.blogspot.com/-ZY5qFY12QUI/UWx4oR14wKI/AAAAAAAAAKc/SW3BWT67pvA/s150/4-38.jpg" />
</a></div>
</td></tr>
<tr><td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 100px; margin: 0px 12px 0px 0px;">
<a href="http://4.bp.blogspot.com/-RmmoPSuQips/UWx4vz9q2_I/AAAAAAAAAKk/PjaPD0VG8yc/s1600/4-44.jpg" imageanchor="1" title="Light Years">
<img style="position: absolute; top:-50px; border="0" src="http://4.bp.blogspot.com/-RmmoPSuQips/UWx4vz9q2_I/AAAAAAAAAKk/PjaPD0VG8yc/s150/4-44.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 120px; margin: -18px 14px 0px 0px;">
<a href="http://3.bp.blogspot.com/-UOzGYBBVICE/UWtyBGWxZaI/AAAAAAAAAIA/LkpQ7_niHvo/s1600/4-37.jpg" imageanchor="1" title="Turnover">
<img style="position: absolute; left:-35px; border="0" src="http://3.bp.blogspot.com/-UOzGYBBVICE/UWtyBGWxZaI/AAAAAAAAAIA/LkpQ7_niHvo/s150/4-37.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 100px; margin: 0px 12px 0px 0px;">
<a href="3.bp.blogspot.com/-XZ843zdMTdU/UWtyAzXH8zI/AAAAAAAAAH8/6UwT0Gp3Ohg/s1600/4-21.jpg" imageanchor="1" title="Turnover">
<img style="position: absolute; top:-50px; border="0" src="3.bp.blogspot.com/-XZ843zdMTdU/UWtyAzXH8zI/AAAAAAAAAH8/6UwT0Gp3Ohg/s150/4-21.jpg" />
</a></div>
</td></tr>
</table>

如有任何帮助，我们将不胜感激!

Answer 1

为此，我建议查看 Bootstrap ;更准确地说是 Bootstrap grid system.看起来你那里有很多代码。 Bootstrap 使它变得简单和简洁。

Bootstrap 的解决方案:

<div class="row">
  <div class="col-md-4">your image</div>
  <div class="col-md-4">your image</div>
  <div class="col-md-4">your image</div>
</div>
<div class="row">
  <div class="col-md-4">your image</div>
  <div class="col-md-4">your image</div>
  <div class="col-md-4">your image</div>
</div>
<div class="row">
   <div class="col-md-4">your image</div>
  <div class="col-md-4">your image</div>
  <div class="col-md-4">your image</div>
</div>

这里有 3 行，每行 3 列。然后，您可以执行必要的操作来添加图像。