html - 匹配不连续且嵌套在一起的 Div 高度

Question

一个古老的问题，但可能会有所不同。我有 3 个内容不同的 div，我需要它们具有相同的高度。更重要的是，我使用的是 CMS，它的 HTML 结构很奇怪。它们不是连续的，它们每个都有 6 个容器 div。

这基本上就是我们的样子:

HTML:

<div class="top-div">
  <div>
    <div>
      <div>
        <div>
          <!-- content... -->
        </div>
      </div>
    </div>
  </div>
</div>

repeat...

CSS:

.top-div {
   display: inline-block;
   width: 33%;
}

这里有选项吗？

记住:我无法更改 HTML

jsFiddle: http://jsfiddle.net/5csorg73/

Answer 1

如果您可以使用 jQuery，请包含此脚本:

https://github.com/liabru/jquery-match-height

并且在 Javascript 中有一行，你可以在行中的所有 div 添加相同的高度

$('.class-name').matchHeight();