Jquery 相同高度的浮动潜水器

我想做同样高度的浮动潜水艇。我在当前的解决方案中使用JavaScript，不过如果有人知道用CSS实现的方法，那就更好了

当前解决方案： 我获取并存储最高div的值，然后将其应用于其他div。 现在的问题是，我正在处理一个流体/响应性布局，当调整浏览器窗口的大小时，内容会扩展/减少，但div的高度不会随之改变。例如，文本将跳出其容器并使窗口变小

物品高度（最高）

你知道怎么解决这个问题吗

---

提前感谢

一种解决方案是使用

显示：表格

和

表格单元格

.container {
    padding-bottom: 30px;
    display: table;
}

.article {
    display: table-cell;
    /* float: left; if required */
    width: 30%;
    margin-right: 15px;
    background: #f3f3f3;
    padding: 20px;
}

如果需要，您仍然可以浮动它们

您需要使用

边框折叠

和

边框间距

来获得它们之间的间距：

.container {
    padding-bottom: 30px;
    display: table;
    border-collapse: separate;
    border-spacing: 5px;
}

有一种（黑客）css方式。另外，我不知道它是如何工作的，也不记得在哪里读过它

不管怎么说，它是这样的：

小提琴：

HTML

---

这里有一些其他的技巧

您的示例的提琴扩展了：

HTML

<div class="container ovrfl prel">
    <div class="article prel">
        <h2>Lorem ipsum</h2>
        <p>Maecenas adipiscing ullamcorper sagittis. Nam luctus consequat convallis. Mauris hendrerit a purus commodo semper. Ut id fringilla nibh. Suspendisse massa velit, dapibus sed elit sit amet, posuere tincidunt.</p>
        <div class="pabs"></div>
    </div>

    <div class="article prel">
        <h2>Lorem ipsum</h2>
        <p>Maecenas adipiscing ullamcorper sagittis. Nam luctus consequat convallis. Mauris hendrerit a purus commodo semper. Ut id fringilla nibh. Suspendisse massa velit, dapibus sed elit sit amet, posuere tincidunt lacus. Donec quis dui non sem iaculis venenatis. Curabitur vitae luctus lectus, sed pellentesque tellus. Vestibulum semper eu tortor semper ornare.</p>
    </div>

    <div class="bott pabs"></div>
</div>

---

我正在使用引导网格类。这个重要的细节应该包括在你的问题中。我不使用Bootstrap，所以不知道它如何影响我的答案。很有趣。希望这能很好地用于引导网格类。我试试看。当然，没什么大不了的。我认为代码和fiddle示例可以看到它。技巧是一个绝对div，用作背景扩展

<div class="columns-wrapper">
    <div class="column">

    </div>
    <div class="column">

    </div>
    <div class="column">

    </div>
    ...
</div>

.columns-wrapper {
    position:relative;
    overflow:hidden;
}

.column {
    background:#ccc;
    padding-bottom:999em;
    margin-bottom:-999em;
    float:left;
    width:33%;
}

<div class="container ovrfl prel">
    <div class="article prel">
        <h2>Lorem ipsum</h2>
        <p>Maecenas adipiscing ullamcorper sagittis. Nam luctus consequat convallis. Mauris hendrerit a purus commodo semper. Ut id fringilla nibh. Suspendisse massa velit, dapibus sed elit sit amet, posuere tincidunt.</p>
        <div class="pabs"></div>
    </div>

    <div class="article prel">
        <h2>Lorem ipsum</h2>
        <p>Maecenas adipiscing ullamcorper sagittis. Nam luctus consequat convallis. Mauris hendrerit a purus commodo semper. Ut id fringilla nibh. Suspendisse massa velit, dapibus sed elit sit amet, posuere tincidunt lacus. Donec quis dui non sem iaculis venenatis. Curabitur vitae luctus lectus, sed pellentesque tellus. Vestibulum semper eu tortor semper ornare.</p>
    </div>

    <div class="bott pabs"></div>
</div>

.container {
    padding-bottom: 30px;
}

.article {
    float: left;
    width: 30%;
    margin-right: 15px;
    background: #f3f3f3;
    padding: 20px;
}

.article p, .article h2 {
    color: black;
}

.prel{
    position:relative;
}
.pabs{
    position:absolute;
}

.container .pabs{
    left:0;
    right:0;
    z-index:-1;
    height:300px;
    background-color:inherit;
}
.ovrfl{
    overflow-y:hidden
}

.container .bott{
    left:0;
    right:0;
    bottom:0;
    height:30px;
    background-color:#fff;
}