使用 jquery .css 均衡两列的高度答案

【问题标题】：Equalizing Height of two columns with jquery .css使用 jquery .css 均衡两列的高度
【发布时间】：2017-09-09 02:03:50
【问题描述】：

我想要两个使连续两列的高度相等。对于这个任务，我想使用 jQuery。

目前我嵌入了 custom.js 并且它被加载了但是这个文件里面的东西是错误的，我希望你能给我一个提示我做错了什么，请 =)

为了测试，这是我的.js的内容：

$(window).load(function() {
var indval001 = $(".indcol1").outerHeight(true);
var indval002 = $(".indcol2").outerHeight(true);
var indval003 = ((indval001 - indval002)/2)
$(".indcol3").css({
    'margin-top' : indval003 + 'px',
    'margin-bottom' : indval003 + 'px'
});});

非常感谢您，并为我糟糕的英语xD道歉

【问题讨论】：

您可以使用下面的 jquery 插件简单地做到这一点。它简单、简单、快捷。 -- github.com/liabru/jquery-match-height
..或者只使用 flexbox
Flexbox 是我的第一个想法，但在第二列中有图片，然后是文本，然后是图片，而在第一列中只有图片。问题是，所有图片都有不同的尺寸！只有文本的边距是可调的！使用 flexbox，它们要么在顶部对齐，要么在底部对齐，但它们必须同时对齐！所以请告诉我，我必须在 js 中更改什么。

标签： jquery css height

【解决方案1】：

不需要插件。

var col1 = $('article:first-child'),
    col2 = $('article:last-child');

if ( col1.outerHeight() > col2.outerHeight()) {

  $(col2).css('height', col1.outerHeight());
  
} else {

  $(col1).css('height', col2.outerHeight());
  
}

* {
  box-sizing: border-box;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

article {
  width: 49%;
  float: left;
  border: 1px solid red;
}

p {
  margin: 0 20px 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  
  <article>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </article>
  <article>
      <p>Short paragraph</p>
  </article>
</div>

【讨论】：