Jquery 随窗口调整大小的等高列

我认为这个标记应该有效，但我肯定是做错了什么。我有两个div，我希望它们的高度相同，并在调整窗口大小时动态调整大小。当框内的文本换行时，其中一个框会变得更高

编辑：两个div并排，我希望较短的一个调整为与较高的一个相同的高度。如果用户有一个屏幕较小的设备，或将窗口调整为较小的大小，则会导致中的文本在一个框之前包装在另一个框中。我希望无论用户如何更改窗口的大小，它们都保持相同的高度

JS

HTML

只需删除>部分：您不会使用第一个选择器找到englobing元素

看

---

此外，您可能还希望使用jquery$window.resize绑定函数调用您的函数，以便在调整窗口大小时各部分保持相等。

这样做很容易

   $(document).ready(function () { 

        maxHeight = 0;
        $('.subFeatured').each(function() {
            maxHeight = Math.max(maxHeight, $(this).outerHeight());
        });

        $('.subFeatured').css({ height: maxHeight + 'px' });  
});​

---

这并不完美，但我最终使用了我在这里找到的一个脚本：

---

后期添加，但供将来参考，在较新的浏览器上，您可以使用flexbox来实现这一点

下面是一个具有相同高度的两个div的示例

HTML 工具书类

---

你能给我一点背景吗？随窗口调整大小是指文档加载时还是用户调整窗口大小时？你能为你描述的文本溢出的例子提供代码吗？你有CSS吗？如果有，请发布它

<div class="subFeaturedContainer">
    <section class="subFeatured">
        <h2>Header</h2>
        <a href="#">Nam vel risus mauris, id lacinia nulla</a>
    </section>

    <section class="subFeatured">
        <h2>Header</h2>
        <a href="#">Donec tincidunt tellus ac dolor tristique blandit. Nam vel iaculis lorem.</a>
    </section>
</div>

.subFeatured {
width: 43.5%;
float: left;
background: rgba(0, 0, 0, 0.7);
border-top: 1px solid #b1bdbe;
padding: 2% 3% 2% 3%;
}

.subFeatured:nth-child(even) {
float: right;
}

   $(document).ready(function () { 

        maxHeight = 0;
        $('.subFeatured').each(function() {
            maxHeight = Math.max(maxHeight, $(this).outerHeight());
        });

        $('.subFeatured').css({ height: maxHeight + 'px' });  
});​

<div class="container">
  <div class="col-1">
    <p>I'm column one</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>Here's my bottom text</p>
  </div>
  <div class="col-2">I'm just a small div</div>
</div>

.container {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
}