具有一个 DIV 类的 JQuery 等高列/行答案

【问题标题】：JQuery Equal Height Columns / Rows with one DIV-Class具有一个 DIV 类的 JQuery 等高列/行
【发布时间】：2014-08-05 18:43:41
【问题描述】：

如何在没有地址所有列类的情况下使用一个 DIV 类创建相等高度的行，而是在第一行中使用 4 行文本的行？

这是我的例子和问题http://jsfiddle.net/8mh4s/1/

   $('.container').each(function() {  

        var highestBox1 = 0;
        $('.column').each(function(){

            if($(this).height() > highestBox1) 
               highestBox1 = $(this).height(); 
        }).height(highestBox1);  
});

我的基础是这个问题 - 但是这个基于行而不是列的 HTML： Setting equal heights for div's with jQuery

谢谢大家！

【问题讨论】：

你不能用桌子吗？
我的设计没有导致盒子阴影问题的原因

标签： jquery html css height equals

【解决方案1】：

Demo

使用 flexbox 仅用于 css 解决方案

css

html, body {
    height: 100%;
    width: 100%;
    margin:0;
    padding:0;
    font-family: calibri;
}
.container {
    display: flex;
}
.column {
    flex: 1;
    border: 1px solid white;
    padding: 5px;
}
.column:nth-child(odd) {
    background-color: grey;
}
.column:nth-child(even) {
    background-color: lightgrey;
}

【讨论】：

看起来不错，但在我的工作中（列中的 DIV）它破坏了我的结构
那么您希望 .column 中的 div 看起来如何？
它们之间 - 但现在它们是并行和延迟的 - 整体元素不允许'display：flex'
jsfiddle.net/kWB99/4 像这样 - 删除 JQuery 代码并添加“display: flex;”到 .box 和 "flex: 1;"到 .container - 看看我的意思
我无法分析你想要它的样子，你能分享你想要的布局图像吗？顺便说一句，您没有正确关闭标签，在jsfiddle.net/4dgaurav/kWB99/5 中，您的代码在没有 jquery 的情况下也可以正常工作。

【解决方案2】：

我不知道你在寻找什么，但也许你应该使用.children()：

http://jsfiddle.net/8mh4s/2/

$(this).children('.column').each(function(){...

【讨论】：

不，但现在第一行不在一行（等高）