Question

我是jQuery的新手，对此并不太了解。

抱歉，如果这是转贴。我在堆栈溢出方面得到了一些例子，但情况略有不同。

Here是了解我想要实现的目标的HTML。

我希望具有相同边框的部分具有相同的高度（高度是动态的）。

我无法更改HTML。

HTML

<div class="container">
  <div class="row">
    <div class="span6">
      <div class="sec1">
        <h3>Lorem ipsum dolor sit amet</h3>
        <ul>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Vestibulum auctor dapibus neque.</li>
</ul>  
      </div>
      <div class="sec2">
        <h3>Lorem ipsum dolor sit amet</h3>
        <ul>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
          <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
</ul>  
      </div>
      <div class="sec3">
        <h3>Lorem ipsum dolor sit amet</h3>
        <ul> 
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        </ul>   
      </div>
    </div>
    <div class="span6">
      <div class="sec1">
        <h3>Lorem ipsum dolor sit amet</h3>
        <ul>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
          <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
</ul>   
      </div>
      <div class="sec2">
        <h3>Lorem ipsum dolor sit amet</h3>
        <ul> 
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        </ul>   
      </div>
      <div class="sec3">
        <h3>Lorem ipsum dolor sit amet</h3>
        <ul> 
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>

        </ul>   
      </div>
    </div>
  </div>
</div>

CSS

[class*="sec"] {
  border: 1px solid #ccc;
  margin-bottom: 10px;
}
.sec2 {
  border-color: red
}
.sec3 {
  border-color: green
}

Answer 1

你可以像this

那样做

jQuery

$(document).ready(function(){
  var maxHeight = -1;

  for (var secCount=0;secCount<4;secCount++){
    $('.sec'+secCount).each(function() {
     maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
   });

   $('.sec'+secCount).each(function() {
     $(this).height(maxHeight);
   });
  }

})

Answer 2

使用此：

$(function(){
    var sec2Ht=0;
   $('.sec2').each(function(){
     var sec2Ht1 = $(this).css('height');
     sec2Ht1 = sec2Ht1.replace('px','');
     if(sec2Ht1 > sec2Ht)
      sec2Ht = sec2Ht1;
   });

   $('.sec2').css('height',sec2Ht+'px');
});

<强> Working Demo

Answer 3

试试这样：

var sec1 = $('.sec1').height();
var sec2 = $('.sec2').height();
if(sec1>sec2){
  $('.sec1,.sec2').css('height',sec1);
} else if(sec1<sec2){
  $('.sec1,.sec2').css('height',sec2);
}

Answer 4

也试试这个：

var height = 100;

var obj = $('#div1');
var obj2= $('#div2');

obj.height(height);
obj2.height(height);

Answer 5

您可以尝试 - 如果您使这些列具有流量/ RWD并且列中具有不同数量的单元格并且不会使所有相等的高度一行一行，则应该使用窗口调整大小：

// to reset after window resize
function _resize_reset (columns_selector) {
  $(columns_selector+' > div').each(function () {
    $(this).css('height','auto');
  })
}

// to setup same heights of cells in both columns
function _resize (column1_selector, column2_selector) {
  var rows1 = $(column1_selector+' > div');
  var rows2 = $(column2_selector+' > div');
  var num = rows1.length < rows2.length ? rows1.length : rows2.length;
  for (var k = 0; k < num; k++) {
    var h1 = $(rows1[k]).height();
    var h2 = $(rows2[k]).height();
    if (h1 < h2) $(rows1[k]).css('height',h2+'px');
    else if (h1 > h2) $(rows2[k]).css('height',h1+'px');
  }
}

// update - to be run on start and on window resize
function _update_resize () {
  _resize_reset('span6');
  setTimeout(function () {
    _resize('.span6:nth-child(1)','.span6:nth-child(2)');
  },200);
}

// initiate it
$(function () {
  _update_resize();
  $(window).resize(_update_resize);
})

http://codepen.io/anon/pen/cKhfB

将相同的高度设置为包含在不同div中的列

5 个答案: