根据图像高度自动调整表格高度？答案

【问题标题】：resize table height automatically based on image height?根据图像高度自动调整表格高度？
【发布时间】：2013-12-27 13:34:38
【问题描述】：

我一直在努力解决这个问题，好几天都想不通，真的很感谢一些帮助:(

我正在使用 Drupal（和视图）来显示图像页面。图像使用网格格式布局。（如果它有助于更轻松地实现我的需要，我愿意将其从 Grid 更改为另一种格式）。

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

我想要达到的效果是让图像彼此叠放，目前图像所坐的桌子的高度都是一样的，并且每张图像下面都有一个间隙，我希望图像能够放置正好在彼此下方，仅相隔 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>

【问题讨论】：

这与您想要实现的目标相似吗？ isotope.js
是的，就是这样，即使它们的高度不同，你也会看到它们是如何叠在一起的：D 我尝试安装这个模块，但它似乎把事情搞砸了，有一个 Views Isotope模块，但对我来说不能正常工作，因为我在此页面上使用 Views Infinite Scroll 模块，所以我认为它们会发生冲突
除了 isotope.js 之类的插件之外，无论您的行有多高，彼此相邻的元素都会被淹没。除非使用大量浮点数和/或绝对定位，否则会发生这种情况。默认情况下，无论高度如何，<tr> 都位于其前面的<tr> 之下。这是<table> 的本性。
好的，所以您的建议是使用 isotope.js，然后尝试找出一种方法来解决与我在该页面上运行的其他 jquery 模块的冲突？
正如您从提供的链接中看到的那样，isotope.js 是响应式的，它会重新排列您的元素/图像以相互叠加和相邻。这适用于设置宽度元素（在这种情况下，它们使用 1x1 和 2x2 网格块），但您必须试一试以查看它是否有效。截至目前，您还没有链接到任何工作演示或示例站点，显示您已经拥有或正在尝试做什么，所以这有点像在黑暗中拍摄，但我很确定这一点一，鉴于我正确理解您的问题。

标签： html css drupal-7 drupal-views

【解决方案1】：

在 cmets 中回答：

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

【讨论】：