匹配身高只有，没有的jQuery或Javascript

Question

我有这样的布局：

与内红色边框的框有the-first类和那些与内部蓝色的边框有课the-second。每对还共享一个额外的类，所以我可以将它们作为一对目标 - 前两个框具有类double-0，而后两个框具有类double-1。

我要寻找一个只CSS的解决方案，一对给定范围内匹配的高度，使我的布局看起来就像这样：

我不能改变结构，或者至少，我不能改变它。部分原因是因为在更宽的屏幕宽度下，我需要匹配前三个盒子的高度，而不是前两个，但我现在不想解决这个问题。还请注意，上面的两对在同一行上并且具有相同的父代。

看到这个fiddle。

HTML

<ul> 
     <li> 
      <div class="content">Donec tincidunt dolor a rhoncus elementum. In pharetra mauris sit amet orci mattis porttitor.</div> 
     </li> 
     <li> 
      <div class="content">Suspendisse tempor augue et augue egestas convallis. Sed vitae faucibus sem. Quisque aliquet arcu quis nisi dictum lobortis. Aliquam vel fringilla justo.</div> 
     </li> 
     <li> 
      <div class="content">Nulla euismod nec elit et vehicula.</div> 
     </li> 
     <li> 
      <div class="content">Maecenas placerat pharetra ex, id placerat mi faucibus vel. Pellentesque ultricies quam vel risus scelerisque ultricies. Nulla ultricies lorem suscipit velit fermentum egestas.</div> 
     </li> 
    </ul> 

JQUERY

// run this function on each 'content' class, and note the (i)ndex and (el)ement of it 
    $('.content').each(function(i, el){ 
    // if the index number divided by 2 is zero (i.e. it's an even number) 
     if (i % 2 === 0) { 
    // then add 'the-first' class to the element 
      $(this).addClass('the-first'); 
     } else { 
    // if not, then add 'the-second' class to the element 
      $(this).addClass('the-second'); 
     } 
    }); 

    // set a counter 
    var count = 0 
    // run this function on each 'content' class 
    $('.content').each(function() { 
    // if the element also has 'the-first' class 
      if($(this).hasClass('content') && $(this).hasClass('the-first')) { 
    // then set the variable 'doubleIndex' that increments the counter by 1 
      var doubleIndex = count++; 
    // then add the class 'double-' + the current value of 'doubleIndex' 
      $(this).addClass('double-' + doubleIndex); 
    // then, go up the DOM tree to the 'li' and from there go to the next 'li' and from there, find the next element with the class 'the-second' and add the class 'double-' + the current value of 'doubleIndex' 
      $(this).parents('li').next('li').find('.the-second').addClass('double-' + doubleIndex); 

     } else { 

     } 
    }); 

CSS

ul { 
     list-style: none; 
     margin: 0; 
     padding: 0; 
     text-align: center; 
    } 

    li { 
     background: rgba(0,0,0,0.1); 
     float: left; 
     margin: 0 2px; 
     padding: 12px 6px; 
     width: calc(25% - 16px); 
    } 

    .the-first { 
     border: 1px solid red; 
    } 

    .the-second { 
     border: 1px solid blue; 
    } 

如果我的jQuery可以改善改善CSS的目标类，伟大的，但我不希望它运行身高计算。

非常感谢您提供任何帮助，您可以提供！

Answer 1

一个非常快速的解决方案是设置特定的高度

.the-first { 
    border: 1px solid red; 
    height: 200px; 
} 
.the-second { 
    border: 1px solid blue; 
    height: 200px; 
}