Question

我想要两个均衡连续两列的高度。对于这个任务，我想使用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

Answer 1

不需要插件。

＆＃13;

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());
  
}

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: