html - 根据图像高度自动调整表格高度？

Question

我一直在为这个问题绞尽脑汁，好几天都想不通，非常感谢您的帮助:(

我正在使用 Drupal(和 View )显示一页图像。图像使用网格格式进行布局。 (如果它有助于更​​轻松地实现我的需要，我愿意将其从网格更改为另一种格式)。

我有 6 张图片，每张图片的设置宽度为 150 像素，图片的高度是自动设置的。

我想要实现的效果是让图片彼此重叠，目前图片所在的 table 高度都是一样的，每张图片下面都有一个空隙，我想让图片放在一起完全在彼此下方，相距仅 1 像素，类似于他们在 Tumblr 上的做法。

打印表格和图像的代码如下，有人可以帮我吗？请。根据我的搜索，我认为我无法使用表格来做到这一点。那是对的吗？如果是这样，那么我该怎么做才能保持类似的网格效果，使每行 6 个图像彼此相邻，然后很好地相互重叠？

非常感谢

    <table id="container" class="views-view-grid cols-6">

      <tbody>
              <tr class="block">
                      <td class="col-1 col-first">

      <div class="views-field views-field-field-image-pin">        
<div class="field-content ptpageimg"><div data-edit-id="node/3643/field_image_pin/und/_custom_views">
<div class="field-item"><div class="domeimageo">

    <a href="/members/ptarticle/woolie-003-0">
<img class="pthover" src="/files/styles/150x200/public/images/pinpage/760_w2.jpg?itok=_ux-EGvz" width="150" height="200" alt="" /></a>
    <a href="/ptarticle/woolie-003-0" target="_self">
    <p class="pttext">Woolie 003
    </p>
    </a>
    </div></div></div></div>  </div>          </td>

                      <td class="col-2">

      <div class="views-field views-field-field-image-pin">        
<div class="field-content ptpageimg"><div data-edit-id="node/3642/field_image_pin/und/_custom_views">
<div class="field-item"><div class="domeimageo">
    <a href="/members/ptarticle/085"><img class="pthover" src="/default/files/styles/150x200/public/images/pinpage/tumblr_mohhz9Ce001sor33mo1_1280.jpg?itok=4wFQzr_h" width="150" height="200" alt="" /></a>
    <a href="/ptarticle/085" target="_self">
    <p class="pttext">085
    </p>
    </a>
    </div></div></div></div>  
</div>          
</td>

Answer 1

如评论中的回答:

除了像 isotope.js 这样的插件，无论您的行有多高，彼此相邻的元素都会消失。除非使用大量 float 和/或绝对定位，否则会发生这种情况。默认情况下，无论高度如何，a 都应位于其前面。这是一种天性。